import { Edit } from "iconsax-react";
import ProgressBar from "../../../../../components/ProgressBar";
import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
import ChecklistItem from "./ChecklistItem";

const CheckLists = () => {
  const items = [
    { id: "1", title: "آیتم ۱", checked: true },
    { id: "2", title: "آیتم ۱", checked: true },
    { id: "3", title: "آیتم ۱", checked: true },
  ];

  return (
    <div className="mt-6">
      <div className="flex gap-2 items-center">
        <div className="text-sm font-bold mt-px">چک لیست</div>
        <Edit size={20} color="#0047FF" />
        <TrashWithConfrim onDelete={() => {}} color="#FF0000" />
      </div>

      <div className="mt-4 flex gap-2 items-center">
        <div className="text-xs shrink-0">۲۵٪</div>
        <ProgressBar value={25} />
      </div>

      <div className="mt-4 flex flex-col gap-2">
        {items.map((item) => (
          <ChecklistItem
            key={item.id}
            title={item.title}
            checked={item.checked}
            onToggle={() => {}}
            onEdit={() => {}}
            onDelete={() => {}}
          />
        ))}
      </div>
    </div>
  );
};

export default CheckLists;