"use client";
import { FC, useState } from "react";
import { componentTypeType } from "src/types/componentTypeType";
import { componentType } from './componentType'
// import AddBrand from "./addBrand";
import { getData } from "src/actions/componentTypeActions";

interface Props {
  componentType: componentType[];
}

const ComponentTypeList: FC<Props> = ({ componentType }) => {
  // State to manage the list of brand items
  const [brandItems, setBrandItems] = useState<brandType[]>(brands);
  
  // Function to create a new brand item
  const createBrand = (name: string) => {
    const id = (brandItems.at(-1)?.id || 0) + 1;
    addBrand(name);
    setBrandItems((prev) => [...prev, { id: id, name: name }]);
  };

  // Function to change the text of a brand item
  const changeBrandName = (id: number, name: string) => {
    setBrandItems((prev) =>
      prev.map((brand) => (brand.id === id ? { ...brand, name } : brand))
    );
    editBrand(id, name);
  };
 
  // Function to delete a brand item
  const deleteBrandItem = (id: number) => {
    setBrandItems((prev) => prev.filter((brand) => brand.id !== id));
    deleteBrand(id);
  };

  // Rendering the brand List component
  return (
    <main className="flex mx-auto max-w-xl w-full min-h-screen flex-col items-center p-16">
      <div className="text-5xl text-gray-800 font-medium">Ballistic Builder Brand</div>
      <div className="w-full flex flex-col mt-8 gap-2">
        {/* Mapping through brand items and rendering brand component for each */}
        {brandItems.map((brand) => (
          <Brand
            key={brand.id}
            brand={brand}
            changeBrandName={changeBrandName}
            deleteBrand={deleteBrand}
          />
        ))}
      </div>
      {/* Adding brand component for creating new brand */}
      <AddBrand createBrand={createBrand} />
    </main>
  );
};
export default ComponentTypeList;