import { PRODUCT_INFO } from '@/shared/constants/data';
import {
  headerContactData,
  menuItemsData,
  navSocialIcons,
} from '@/widgets/navbar/lib/data';
import Image from 'next/image';
import React from 'react';
import SidebarMenuItem from './SidebarMenuItem';
import Link from 'next/link';
import { useCategoryStore } from '@/shared/store/categoryStore';

const SidebarContent = () => {
  const { categories } = useCategoryStore();

  const menuItems = menuItemsData.map((item) => {
    if (item.id === 'pr005e') {
      return {
        ...item,
        children: categories.map((item) => {
          return {
            id: item.id,
            title: item.title,
            link: '/products',
          };
        }),
      };
    } else {
      return item;
    }
  });

  return (
    <div className="p-1">
      <div className="flex justify-center items-center py-[5px]">
        <Image
          className="invert-100 brightness-0"
          src={PRODUCT_INFO.logo}
          alt={PRODUCT_INFO.name}
          width={80}
          height={50}
        />
        <span className="text-[13px] font-bold text-center">
          {PRODUCT_INFO.logoTitle}
        </span>
      </div>
      <div className="my-[20px] border-t border-t-white/10">
        {menuItems.map((item) => (
          <SidebarMenuItem key={item.id} item={item} />
        ))}
      </div>
      <div className="flex flex-col gap-3">
        {headerContactData.map(({ id, icon: Icon, title, link }) => (
          <Link href={link} key={id}>
            <div key={id} className="flex items-center gap-2 group">
              <div className="w-[25px] h-[25px] rounded-full bg-primary text-white flex justify-center items-center">
                <Icon size={'14px'} className="fill-white stroke-primary" />
              </div>
              <div className="text-[13px] font-medium group-hover:text-primary duration-300">
                {title}
              </div>
            </div>
          </Link>
        ))}
      </div>
      <div className="flex items-center gap-4 my-[15px] pl-[2px]">
        {navSocialIcons.map(({ id, icon: Icon, link }) => (
          <div key={id}>
            <Link href={link} target="blank">
              <div className="text-white hover:text-primary duration-200 text-[18px]">
                <Icon />
              </div>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SidebarContent;
