import type { ReactNode } from "react";
import { cn } from "@/lib/utils/cn";

export function RoleCard({
  icon,
  title,
  description,
  ctaLabel,
  ctaVariant,
  onSelect,
}: {
  icon: ReactNode;
  title: string;
  description: string;
  ctaLabel: string;
  ctaVariant: "primary" | "secondary";
  onSelect: () => void;
}) {
  return (
    <div className="flex flex-col gap-5 rounded-xl border border-gray-300 bg-gray-50 p-4">
      <div className="flex items-center gap-3">
        <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-action/10 text-primary-action">
          {icon}
        </span>
        <h3 className="text-title-large font-extrabold text-foreground">{title}</h3>
      </div>
      <p className="text-body-medium text-gray-700">{description}</p>
      <button
        type="button"
        onClick={onSelect}
        className={cn(
          "flex h-12 w-full items-center justify-center rounded-full text-body-large font-semibold transition-colors",
          ctaVariant === "primary"
            ? "border-0 bg-primary-action text-white hover:bg-primary-action/90"
            : "border border-primary-action bg-white text-primary-action hover:bg-primary-action/5",
        )}
      >
        {ctaLabel}
      </button>
    </div>
  );
}