import { Container, Table } from "react-bootstrap";
import React from "react";


const freshProduceData = [
  { produce: "Grapes", keyParts: "Stems and Berries", effect: "Keeps stems hydrated and berries plump" },
  { produce: "Bananas", keyParts: "Peel", effect: "Prevents browning and softening" },
  { produce: "Mangoes", keyParts: "Skin and Flesh", effect: "Slows ripening, preserves firmness and flavour" },
  { produce: "Pomegranates", keyParts: "Rind and Arils", effect: "Maintains rind integrity and prevents moisture loss" },
  { produce: "Chillies", keyParts: "Flesh and Skin", effect: "Maintains freshness and green colour" },
  { produce: "Drumsticks", keyParts: "Skin and Seeds", effect: "Prevents drying and maintains moisture" },
  { produce: "Apple Bore", keyParts: "Skin", effect: "Keeps fruit firm, prevents softening" },
  { produce: "Haldi (Turmeric)", keyParts: "Skin", effect: "Prevents spoilage and maintains freshness" },
  { produce: "Ginger", keyParts: "Skin", effect: "Slows decay and prevents sprouting" },
  { produce: "Leafy Vegetables", keyParts: "Leaves and Stems", effect: "Maintains crispness, prevents wilting" },
  { produce: "Cauliflower", keyParts: "Curds and Leaves", effect: "Prevents yellowing, preserves freshness" },
];

export default function EffectTable() {
  return (
    <Container className="my-5">
      <h2 className="text-center mb-4" style={{marginTop:"-70px"}}>Effect of Sanjaya Agri Fresh Keeper</h2>
      <Table striped bordered hover responsive>
        <thead className="table-primary">
          <tr>
            <th>Fresh Produce</th>
            <th>Key Parts Maintained</th>
            <th>Effect of Vamsa Agri Fresh Keeper</th>
          </tr>
        </thead>
        <tbody>
          {freshProduceData.map((item, index) => (
            <tr key={index}>
              <td>{item.produce}</td>
              <td>{item.keyParts}</td>
              <td>{item.effect}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Container>
  );
}
