const units = [
  { id: 1, title: "Entrance", area: "3.25x3.10" },
  { id: 2, title: "Living Room", area: "4.10x5.10" },
  { id: 3, title: "Dining Room", area: "5.00x5.00" },
  { id: 4, title: "Store 1", area: "2.90x1.35" },
  { id: 5, title: "Men’s Majlas", area: "5.00x7.00" },
  { id: 6, title: "Bathroom 1", area: "1.70x2.00" },
  { id: 7, title: "Washbasins", area: "1.80x2.00" },
  { id: 8, title: "Guest Bedroom", area: "4.10x4.60" },
  { id: 9, title: "Bathroom 2", area: "2.70x2.00" },
  { id: 10, title: "Kitchen", area: "5.00x4.00" },
  { id: 11, title: "Bathroom 3", area: "1.50x2.50" },
  { id: 12, title: "Store 2", area: "2.20x1.30" },
  { id: 13, title: "Laundry Room", area: "2.20x1.50" },
  { id: 14, title: "Domestic Worker Room", area: "3.50x3.00" },
  { id: 15, title: "Domestic Worker Bathroom", area: "1.50x2.00" },
];

const UnitList = () => {
  return (
    <div className="px-8 py-6">
      <div className="font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4 ">
        <div>№</div>
        <div className="flex justify-between w-full">
          <div>Unit</div>
          <div>Area (m)</div>
        </div>
      </div>
      {units.map((unit, index) => (
        <div
          key={unit.id}
          className={`font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4 ${
            index % 2 === 0 ? "bg-[#F3F2F0] rounded-lg" : ""
          }`}
        >
          <div>{index + 1}</div>
          <div className="flex justify-between w-full">
            <div>{unit.title}</div>
            <div>{unit.area}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default UnitList;