import React from 'react';
import './PlasticTypes.css';

const plasticTypes = [
  { code: '♳', name: 'PET', fullName: 'Polyethylene Terephthalate', uses: 'Soft drink bottles, water bottles, packaging' },
  { code: '♴', name: 'HDPE', fullName: 'High Density Polyethylene', uses: 'Milk bottles, detergent bottles, grocery bags' },
  { code: '♵', name: 'PVC', fullName: 'Polyvinyl Chloride', uses: 'Pipes, garden hoses, packagings, toys' },
  { code: '♶', name: 'LDPE', fullName: 'Low Density Polyethylene', uses: 'Plastic bags, squeeze bottles, cling film' },
  { code: '♷', name: 'PP', fullName: 'Polypropylene', uses: 'Bottle lids, straws, medicine containers' },
  { code: '♸', name: 'PS', fullName: 'Polystyrene', uses: 'Disposable cups, cutlery, takeaway containers' },
  { code: '♹', name: 'OTHER', fullName: 'Other Plastics', uses: 'CDs, sunglasses, nylon products' },
];

const PlasticTypes = () => (
  <div className="plastic-table-container">
    <h2 className="plastic-title">Plastic Types ♻️</h2>
    <table className="plastic-table">
      <thead>
        <tr>
          <th>Code</th>
          <th>Type</th>
          <th>Full Name</th>
          <th>Common Uses</th>
        </tr>
      </thead>
      <tbody>
        {plasticTypes.map(({code, name, fullName, uses}) => (
          <tr key={name}>
            <td className="code">{code}</td>
            <td className="name">{name}</td>
            <td className="fullName">{fullName}</td>
            <td className="uses">{uses}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

export default PlasticTypes;