import { PencilSquareIcon } from "@heroicons/react/24/outline";
import { useState } from "react";
import PartModal from "./PartModal";

export default function PartCard({
  title,
  description,
}: {
  title: string;
  description: string;
}) {
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);

  return (
    <section>
      <div className="mt-6">
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-bold">{title}</h2>
          <button
            className="flex items-center text-brandmidblue hover:text-brandblue transition-colors duration-200 cursor-pointer"
            onClick={() => setIsDetailModalOpen(true)}
          >
            <PencilSquareIcon className="h-6 w-6 ml-2" />
            Edit
          </button>
        </div>
        <p className="text-gray-600">{description}</p>
      </div>
      <PartModal
        isOpen={isDetailModalOpen}
        setIsOpen={setIsDetailModalOpen}
        title={title}
      />
    </section>
  );
}
