BillTracker/client/components/bill-modal/TemplateSection.tsx

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';

interface TemplateSectionProps {
  inp?: string;
  saveTemplate: boolean;
  setSaveTemplate: (v: boolean) => void;
  templateName: string;
  setTemplateName: (v: string) => void;
  namePlaceholder?: string;
}

// "Save this setup as a reusable template" toggle + optional template name.
// Presentational — the parent owns the state and performs the save.
export default function TemplateSection({
  inp,
  saveTemplate, setSaveTemplate,
  templateName, setTemplateName,
  namePlaceholder,
}: TemplateSectionProps) {
  return (
    <div className="col-span-2 rounded-lg border border-border/60 bg-muted/20 p-3">
      <label className="flex items-center gap-2.5 cursor-pointer group">
        <input
          type="checkbox"
          checked={saveTemplate}
          onChange={e => setSaveTemplate(e.target.checked)}
          className="h-4 w-4 rounded border-border accent-primary"
        />
        <span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
          Save this setup as a reusable template
        </span>
      </label>
      {saveTemplate && (
        <div className="mt-2 space-y-1.5">
          <Label className="text-xs uppercase tracking-wider text-muted-foreground">Template Name</Label>
          <Input
            className={inp}
            value={templateName}
            onChange={e => setTemplateName(e.target.value)}
            placeholder={namePlaceholder || 'My bill template'}
          />
        </div>
      )}
    </div>
  );
}