"use client";

import type { ReactNode } from "react";

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

export function SettingsToggleRow({
  label,
  hint,
  checked,
  disabled,
  onCheckedChange,
  className,
  trailing,
}: {
  label: string;
  hint?: string;
  checked: boolean;
  disabled?: boolean;
  onCheckedChange: (value: boolean) => void;
  className?: string;
  trailing?: ReactNode;
}) {
  return (
    <div
      className={cn(
        "flex flex-wrap items-center justify-between gap-3 px-4 py-3.5 bg-background/50 transition-colors hover:bg-muted/30",
        className,
      )}
    >
      <div
        className="min-w-0 flex-1 cursor-pointer space-y-1 pr-4"
        onClick={() => !disabled && onCheckedChange(!checked)}
        onKeyDown={(event) => {
          if (disabled) {
            return;
          }
          if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            onCheckedChange(!checked);
          }
        }}
        role="button"
        tabIndex={disabled ? -1 : 0}
      >
        <Label className="cursor-pointer font-medium">{label}</Label>
        {hint ? <p className="text-sm text-muted-foreground">{hint}</p> : null}
      </div>
      {trailing ?? (
        <Switch
          checked={checked}
          disabled={disabled}
          aria-label={label}
          onCheckedChange={onCheckedChange}
        />
      )}
    </div>
  );
}