Switch Card

"use client";

import { cn } from "cn";
import * as React from "react";

import { Switch } from "@/components/ui/switch";

type SwitchCardProps = Omit<
  React.ComponentProps<typeof Switch>,
  "title" | "children"
> & {
  title: React.ReactNode;
  description?: React.ReactNode;
  icon?: React.ElementType;
};

function SwitchCard({
  className,
  title,
  description,
  icon: Icon,
  id,
  disabled,
  ...props
}: SwitchCardProps) {
  const generatedId = React.useId();
  const switchId = id ?? generatedId;
  return (
    <label
      data-slot="switch-card"
      htmlFor={switchId}
      className={cn(
        "flex w-full cursor-pointer items-center justify-between gap-3 rounded-[12px] border border-border bg-popover py-3 pe-5 ps-4 select-none transition-colors duration-150 ease-[ease] hover:bg-[var(--surface-hover,var(--muted))] motion-reduce:transition-none",
        disabled && "cursor-not-allowed opacity-50 hover:bg-popover",
        className
      )}
    >
      <span className="flex min-w-0 items-center gap-3">
        {Icon && (
          <Icon className="size-6 shrink-0 text-muted-foreground" aria-hidden />
        )}
        <span className="flex min-w-0 flex-col gap-0.5 text-sm leading-5 tracking-normal">
          <span className="truncate font-medium text-foreground">{title}</span>
          {description != null && (
            <span className="truncate font-normal text-muted-foreground">
              {description}
            </span>
          )}
        </span>
      </span>
      <Switch id={switchId} disabled={disabled} {...props} />
    </label>
  );
}

export { SwitchCard };
export type { SwitchCardProps };