import type { ReactNode } from "react";

type StrategySelectorCardProps = {
  title: string;
  description: string;
  status: "Active" | "Coming Soon";
  cta?: string;
  disabled?: boolean;
  icon?: ReactNode;
  onClick?: () => void;
};

export default function StrategyCard({
  title,
  description,
  status,
  cta,
  disabled = false,
  icon,
  onClick,
}: StrategySelectorCardProps) {
  const isActive = status === "Active" && !disabled;

  return (
    <button
      type="button"
      onClick={disabled ? undefined : onClick}
      disabled={disabled}
      className={`group relative w-full rounded-2xl border border-white/10 bg-white/5 p-6 text-left transition-all duration-300 ${
        isActive
          ? "hover:-translate-y-1 hover:border-primary/50 hover:shadow-[0_20px_50px_rgba(34,211,238,0.15)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary/60"
          : "opacity-50 cursor-not-allowed"
      }`}
    >
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <span
            className={`flex h-11 w-11 items-center justify-center rounded-xl border ${
              isActive ? "border-primary/40 bg-primary/10 text-primary" : "border-white/10 text-muted-foreground"
            }`}
          >
            {icon}
          </span>
          <div>
            <h3 className="text-lg font-semibold text-foreground">{title}</h3>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
        <span
          className={`rounded-full px-3 py-1 text-xs font-semibold ${
            isActive
              ? "bg-emerald-500/15 text-emerald-200 border border-emerald-400/30"
              : "bg-white/5 text-muted-foreground border border-white/10"
          }`}
        >
          {status}
        </span>
      </div>

      {isActive && cta ? (
        <div className="mt-5 flex items-center justify-between">
          <span className="text-sm font-semibold text-primary">{cta}</span>
          <span className="h-2 w-2 rounded-full bg-primary shadow-[0_0_12px_rgba(34,211,238,0.6)]" />
        </div>
      ) : (
        <div className="mt-5 text-xs text-muted-foreground">Stay tuned for the launch.</div>
      )}

      {isActive && (
        <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100">
          <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/10 via-transparent to-transparent" />
        </div>
      )}
    </button>
  );
}
