import { ChevronRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

interface BusinessInsightCardProps {
  description: string;
  href: string;
  imageAlt: string;
  imageSrc: string;
  title: string;
}

export function BusinessInsightCard({
  description,
  href,
  imageAlt,
  imageSrc,
  title,
}: BusinessInsightCardProps) {
  return (
    <Link
      href={href}
      className="group grid min-h-40 grid-cols-[6rem_1fr_auto] items-center gap-4 rounded-lg bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus-visible:ring-2 focus-visible:ring-green-600 focus-visible:ring-offset-2 focus-visible:outline-none sm:grid-cols-[7rem_1fr_auto] sm:p-5"
    >
      <div className="flex aspect-square items-center justify-center overflow-hidden bg-gray-100 p-3">
        <Image
          src={imageSrc}
          alt={imageAlt}
          width={120}
          height={120}
          className="h-full w-full object-contain"
        />
      </div>

      <div className="min-w-0">
        <h3 className="text-base font-semibold text-gray-950 sm:text-lg">
          {title}
        </h3>
        <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-gray-600">
          {description}
        </p>
      </div>

      <ChevronRight
        aria-hidden="true"
        className="size-5 shrink-0 text-gray-500 transition-transform group-hover:translate-x-1 group-hover:text-green-600"
      />
    </Link>
  );
}