"use client";

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

// =============================================================================
// PathCardDark — Large card for the 3 main paths on the home page (Dark Theme)
// =============================================================================

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

export function PathCardDark({ icon, title, badge, description, href, className }: PathCardDarkProps) {
  return (
    <Link
      href={href}
      className={cn(
        "group relative flex items-start gap-4 rounded-xl border border-[#242428] bg-[#111113] p-5",
        "transition-all duration-200",
        "hover:border-[#2A2A30] hover:bg-[#151518] hover:shadow-[0_4px_20px_rgba(0,0,0,0.5)]",
        "active:scale-[0.99]",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#FFFFFF]/20",
        className,
      )}
    >
      {/* Icon container */}
      <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-[#151518] border border-[#2A2A30] text-[#A1A1AA] transition-colors group-hover:bg-[#FFFFFF] group-hover:text-[#0A0A0A]">
        <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-[#FFFFFF]">{title}</h3>
          {badge && (
            <span className="rounded-full bg-[#18181B] border border-[#2A2A30] px-2 py-0.5 text-[11px] font-medium text-[#A1A1AA]">
              {badge}
            </span>
          )}
        </div>
        <p className="mt-1 text-[13px] leading-relaxed text-[#A1A1AA]">{description}</p>
      </div>

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

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

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

export function PathCardDarkLarge({
  icon,
  title,
  subtitle,
  description,
  ctaLabel,
  href,
  className,
}: PathCardDarkLargeProps) {
  return (
    <Link
      href={href}
      className={cn(
        "group flex flex-col rounded-xl border border-[#242428] bg-[#111113] p-6",
        "transition-all duration-200",
        "hover:border-[#2A2A30] hover:bg-[#151518] hover:shadow-[0_4px_20px_rgba(0,0,0,0.5)] hover:-translate-y-0.5",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#FFFFFF]/20",
        className,
      )}
    >
      {/* Icon */}
      <div className="mb-4 flex size-11 items-center justify-center rounded-xl bg-[#151518] border border-[#2A2A30] text-[#A1A1AA] transition-colors group-hover:bg-[#FFFFFF] group-hover:text-[#0A0A0A]">
        <span className="[&>svg]:size-5">{icon}</span>
      </div>

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

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

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