import Link from "next/link";
import { cn } from "@/lib/utils";

interface CardProps {
  title: string;
  description: string;
  imageSrc?: string;
  imageAlt?: string;
  href?: string;
  children?: React.ReactNode;
  className?: string;
}

export default function Card({
  title,
  description,
  imageSrc,
  imageAlt,
  href,
  children,
  className,
}: CardProps) {
  const content = (
    <>
      {imageSrc && (
        <div className="aspect-video overflow-hidden rounded-t-card">
          <img
            src={imageSrc}
            alt={imageAlt || title}
            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
            loading="lazy"
            width={600}
            height={338}
          />
        </div>
      )}
      <div className="p-6">
        <h3 className="text-xl font-semibold text-neutral-900">{title}</h3>
        <p className="mt-2 text-neutral-600 leading-relaxed">{description}</p>
        {children}
      </div>
    </>
  );

  const cardClasses = cn(
    "group overflow-hidden rounded-card bg-white shadow-sm border border-neutral-200 transition-shadow duration-300 hover:shadow-md",
    className
  );

  if (href) {
    return (
      <Link href={href} className={cn(cardClasses, "block")}>
        {content}
      </Link>
    );
  }

  return <div className={cardClasses}>{content}</div>;
}
