"use client";
import { FC, useState } from "react";
import { brandType } from "../../types/brandType";
import Brand from "./brand";
import AddBrand from "./addBrand";
import { addBrand, deleteBrand, editBrand } from "../../actions/brandActions";
interface Props {
  brands: brandType[];
}
const Brands: FC<Props> = ({ brands }) => {
  // 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 deleteTodoItem = (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 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 Brands;