import type React from "react"
import Link from "next/link"
import { cn } from "@/lib/utils"

interface CategoryIconProps {
  id: string
  icon: React.ReactNode
  href?: string
  color?: string
}

export function CategoryIcon({ id, icon, href, color = "bg-primary" }: CategoryIconProps) {
  const content = (
    <div
      className={cn(
        "flex h-16 w-16 items-center justify-center rounded-2xl text-2xl transition-transform hover:scale-105",
        color,
      )}
    >
      {icon}
    </div>
  )

  if (href) {
    return <Link href={href}>{content}</Link>
  }

  return content
}
