import type * as React from 'react';

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

interface VisibilityOptionProps {
  value: string;
  label: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  selected: boolean;
  onChange: (v: string) => void;
}

export function VisibilityOption({
  value,
  label,
  description,
  icon: Icon,
  selected,
  onChange,
}: VisibilityOptionProps) {
  return (
    <button
      type="button"
      onClick={() => onChange(value)}
      className={cn(
        'flex w-full items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors',
        selected ? 'border-primary bg-accent/50' : 'border-border hover:bg-muted',
      )}
    >
      <span
        className={cn(
          'mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-full border-2 transition-colors',
          selected ? 'border-primary bg-primary' : 'border-border bg-card',
        )}
      >
        {selected && <span className="size-[6px] rounded-full bg-primary-foreground" />}
      </span>
      <div className="min-w-0 flex-1">
        <p className="text-[14px] font-medium text-foreground">{label}</p>
        <p className="mt-0.5 text-[12px] text-muted-foreground">{description}</p>
      </div>
      <Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
    </button>
  );
}
