src/components/clean/shared/PathCard.tsx

"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

// =============================================================================
// PathCard — Large card for the 3 main paths on the home page
// =============================================================================

export interface PathCardProps {
  icon: React.ReactNode;
  title: string;
  badge?: string;
  description: string;
  href: string;
  className?: string;
}

export function PathCard({ icon, title, badge, description, href, className }: PathCardProps) {
  return (
    <Link
      href={href}
      className={cn(
        "group relative flex items-start gap-4 rounded-xl border border-[#E5E7EB] bg-white p-5",
        "transition-all duration-200",
        "hover:border-[#D1D5DB] hover:shadow-[0_4px_12px_rgba(0,0,0,0.06)]",
        "active:scale-[0.99]",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111]/20",
        className,
      )}
    >
      {/* Icon container */}
      <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-[#F3F4F6] text-[#111] transition-colors group-hover:bg-[#111] group-hover:text-white">
        <span className="[&>svg]:size-5">{icon}</span>
      </div>

      {/* Content */}
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <h3 className="text-[16px] font-semibold text-[#111]">{title}</h3>
          {badge && (
            <span className="rounded-full bg-[#F3F4F6] px-2 py-0.5 text-[11px] font-medium text-[#6B7280]">
              {badge}
            </span>
          )}
        </div>
        <p className="mt-1 text-[13px] leading-relaxed text-[#6B7280]">{description}</p>
      </div>

      {/* Arrow */}
      <ChevronRight className="mt-1 size-5 shrink-0 text-[#D1D5DB] transition-all group-hover:translate-x-0.5 group-hover:text-[#111]" />
    </Link>
  );
}

// =============================================================================
// PathCardLarge — Desktop variant with CTA button (used on home page grid)
// =============================================================================

export interface PathCardLargeProps {
  icon: React.ReactNode;
  title: string;
  subtitle: string;
  description: string;
  ctaLabel: string;
  href: string;
  className?: string;
}

export function PathCardLarge({
  icon,
  title,
  subtitle,
  description,
  ctaLabel,
  href,
  className,
}: PathCardLargeProps) {
  return (
    <Link
      href={href}
      className={cn(
        "group flex flex-col rounded-xl border border-[#E5E7EB] bg-white p-6",
        "transition-all duration-200",
        "hover:border-[#D1D5DB] hover:shadow-[0_4px_12px_rgba(0,0,0,0.06)]",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111]/20",
        className,
      )}
    >
      {/* Icon */}
      <div className="mb-4 flex size-11 items-center justify-center rounded-xl bg-[#F3F4F6] text-[#111] transition-colors group-hover:bg-[#111] group-hover:text-white">
        <span className="[&>svg]:size-5">{icon}</span>
      </div>

      {/* Title + Badge */}
      <h3 className="text-[16px] font-semibold text-[#111]">{title}</h3>
      <p className="mt-0.5 text-[12px] font-medium text-[#9CA3AF]">{subtitle}</p>

      {/* Description */}
      <p className="mt-3 flex-1 text-[13px] leading-relaxed text-[#6B7280]">{description}</p>

      {/* CTA */}
      <div className="mt-5 inline-flex items-center gap-1.5 rounded-lg bg-[#111] px-4 py-2.5 text-[13px] font-semibold text-white transition-colors group-hover:bg-black">
        {ctaLabel}
        <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5" />
      </div>
    </Link>
  );
}