import React from 'react';
import clsx from 'clsx';
import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
import DescriptionIcon from '@mui/icons-material/Description';

interface TabItem {
  id: number;
  title: string;
}

interface NavTabProps {
  tabs: TabItem[];
  activeTab: number;
  setActiveTab: (idx: number) => void;
}

const getTabIcon = (id: number) => {
  switch (id) {
    case 1:
      return <PhotoCameraIcon sx={{ fontSize: 18 }} />;
    case 2:
      return <OndemandVideoIcon sx={{ fontSize: 18 }} />;
    case 3:
      return <DescriptionIcon sx={{ fontSize: 18 }} />;
    default:
      return null;
  }
};

const NavTab: React.FC<NavTabProps> = ({ tabs, activeTab, setActiveTab }) => {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3 mb-6 shrink-0 z-20">
      {tabs.map((tab) => {
        const isActive = activeTab === tab.id;
        return (
          <button
            key={tab.id}
            type="button"
            onClick={() => setActiveTab(tab.id)}
            className={clsx(
              'px-5 py-2.5 rounded-full text-xs sm:text-sm font-bold tracking-wide transition-all duration-200 cursor-pointer flex items-center gap-2 select-none shadow-md',
              isActive
                ? 'bg-[#00AFDD] text-white shadow-[#00AFDD]/40 border border-[#00AFDD] scale-105'
                : 'bg-slate-800/80 text-slate-300 hover:text-white hover:bg-slate-700/80 border border-white/10'
            )}
          >
            {getTabIcon(tab.id)}
            <span>{tab.title}</span>
          </button>
        );
      })}
    </div>
  );
};

export default NavTab;