shoc-frontend-new/src/components/ui/toggle-card.tsx

import type { ButtonHTMLAttributes, ReactNode } from "react";

import { cn } from "@/lib/utils";

export type ToggleCardProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
  selected: boolean;
  title: ReactNode;
  description?: ReactNode;
};

export function ToggleCard({
  selected,
  title,
  description,
  className,
  type = "button",
  disabled,
  ...props
}: ToggleCardProps) {
  return (
    <button
      type={type}
      disabled={disabled}
      className={cn(
        "cursor-pointer rounded-lg text-left transition-colors",
        selected
          ? "border-2 border-primary bg-primary/10 px-[11px] py-[9px]"
          : "border border-border bg-background px-3 py-2.5 hover:bg-muted",
        disabled && "cursor-not-allowed opacity-50",
        className,
      )}
      {...props}
    >
      <div className="text-[13px] font-semibold text-foreground">{title}</div>
      {description != null && (
        <div className="mt-0.5 text-[11px] leading-snug text-muted-foreground">{description}</div>
      )}
    </button>
  );
}