import { CheckCircleIcon } from "@heroicons/react/24/solid";
import cn from "../utils/cn";
import ProBadge from "./ProBadge";

const OptionCard = ({
  icon: Icon,
  title,
  description,
  selected,
  disabled,
  showPro,
  onClick,
}) => {
  return (
    <button
      type="button"
      disabled={disabled}
      aria-pressed={selected}
      onClick={onClick}
      className={cn(
        "ino:group ino:relative ino:flex ino:cursor-pointer ino:items-start ino:gap-3 ino:rounded-lg ino:border ino:bg-card ino:p-4 ino:text-left ino:transition-all ino:duration-150 ino:focus:outline-none! ino:focus:shadow-none! ino:focus-visible:ring-2 ino:focus-visible:ring-ring/50 ino:disabled:cursor-not-allowed",
        selected
          ? "ino:border-primary ino:bg-primary/5 ino:shadow-sm"
          : "ino:border-border ino:enabled:hover:border-primary/40 ino:enabled:hover:bg-muted/40 ino:disabled:opacity-50",
      )}
    >
      <div
        className={cn(
          "ino:flex ino:size-10 ino:shrink-0 ino:items-center ino:justify-center ino:rounded-lg ino:transition-colors",
          selected
            ? "ino:bg-primary ino:text-white"
            : "ino:bg-primary/10 ino:text-primary",
        )}
      >
        <Icon className="ino:size-5" />
      </div>
      <div className="ino:min-w-0 ino:pr-5">
        <p className="ino:m-0 ino:flex ino:items-center ino:gap-1.5 ino:text-sm ino:font-semibold ino:text-card-foreground">
          {title}
          {showPro && <ProBadge />}
        </p>
        <p className="ino:m-0 ino:mt-1 ino:text-xs ino:leading-relaxed ino:text-muted-foreground">
          {description}
        </p>
      </div>
      {selected ? (
        <CheckCircleIcon className="ino:absolute ino:top-3 ino:right-3 ino:size-5 ino:text-primary" />
      ) : (
        <span className="ino:absolute ino:top-3.5 ino:right-3.5 ino:size-4 ino:rounded-full ino:border-2 ino:border-border" />
      )}
    </button>
  );
};
export default OptionCard;