const CategoryCard: React.FC<CategoryCardProps> = ({ name, icon: Icon }) => {
  return (
    <div className="flex h-14 w-full items-center justify-start rounded-2xl bg-frostWhite/80 px-4 shadow-md transition-shadow duration-300 hover:shadow-lg">
      <Icon className="text-[22px] text-gray-600" />
      <span className="ml-3 text-xl font-medium text-gray-800">{name}</span>
    </div>
  );
};



import { IconType } from "react-icons";
import {
  FaBolt,
  FaPalette,
  FaStar,
  FaLaptop,
  FaFont,
  FaCamera,
  FaGraduationCap,
  FaBlog,
  FaPodcast,
  FaBook,
  FaUniversalAccess,
  FaUsers,
  FaRobot,
  FaPencilRuler,
  FaMagic,
  FaPaintBrush,
  FaClipboardCheck,
  FaCode,
} from "react-icons/fa";

interface Category {
  id: string;
  name: string;
  icon: IconType;
}

export const categories: Category[] = [
  { id: "inspiration", name: "Inspiration", icon: FaBolt },
  { id: "illustrations", name: "Illustrations", icon: FaPalette },
  { id: "icons", name: "Icons", icon: FaStar },
  { id: "mockups", name: "Mockups", icon: FaLaptop },
];