import Link from "next/link";
import ToolIcon from "@/components/ToolIcon";
import { Price } from "@/lib/currency";

export type ToolCardData = {
  name: string;
  slug: string;
  price: number;
  period: string;
  iconUrl?: string | null;
  badge?: string | null;
  categoryName?: string | null;
  checkoutToken: string;
};

export default function ToolCard({ tool }: { tool: ToolCardData }) {
  return (
    <div className="group relative flex flex-col rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-brand-200 hover:shadow-lg">
      <Link href={`/tools/${tool.slug}/`} className="flex items-start gap-4">
        <ToolIcon name={tool.name} iconUrl={tool.iconUrl} />
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-1.5">
            {tool.categoryName && (
              <span className="rounded-full bg-brand-50 px-2.5 py-0.5 text-[11px] font-semibold text-brand-600">
                {tool.categoryName}
              </span>
            )}
            {tool.badge && (
              <span className="rounded-full bg-amber-50 px-2.5 py-0.5 text-[11px] font-semibold text-amber-600">
                {tool.badge}
              </span>
            )}
          </div>
          <h3 className="mt-1.5 line-clamp-2 text-sm font-semibold text-slate-900 transition-colors group-hover:text-brand-600">
            {tool.name}
          </h3>
        </div>
      </Link>
      <div className="mt-4 flex items-center justify-between border-t border-slate-50 pt-4">
        <p className="text-lg font-bold text-slate-900">
          <Price bdt={tool.price} />
          <span className="text-xs font-medium text-slate-400"> / {tool.period}</span>
        </p>
        <Link
          href={`/checkout/${tool.checkoutToken}/`}
          className="rounded-lg bg-brand-600 px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-brand-700"
        >
          Purchase
        </Link>
      </div>
    </div>
  );
}