import { Card, Label, Textarea } from '@/Components/ui';
import type { FormErrors, FormShape, UpdateFn } from './types';

type Props = {
    form: FormShape;
    errors: FormErrors;
    update: UpdateFn;
};

export default function KitAuthoringTab({ form, errors, update }: Props) {
    return (
        <Card padding="lg">
            <header className="mb-5">
                <h2 className="text-base font-semibold tracking-tight text-foreground">
                    Kit authoring
                </h2>
                <p className="mt-1 text-[12px] text-muted-foreground">
                    Controls who sees the "Export as template" menu item.
                    Comma-separated full emails or
                    <code className="mx-1 rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
                        @domain.tld
                    </code>
                    suffixes (e.g.
                    <code className="mx-1 rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
                        @acme.com
                    </code>
                    allows any user on that domain).
                </p>
            </header>

            <div className="space-y-1.5">
                <Label htmlFor="kit_author_emails">Allowlist</Label>
                <Textarea
                    id="kit_author_emails"
                    name="kit_author_emails"
                    rows={4}
                    value={form.kit_author_emails}
                    onChange={(e) =>
                        update('kit_author_emails', e.target.value)
                    }
                    invalid={Boolean(errors.kit_author_emails)}
                    placeholder="alice@example.com, @acme.com"
                    className="font-mono text-[12px]"
                    data-testid="admin-settings-kit-authors"
                />
                {errors.kit_author_emails ? (
                    <p className="text-xs text-destructive">
                        {errors.kit_author_emails}
                    </p>
                ) : (
                    <p className="text-xs text-muted-foreground">
                        Blank disables authoring for everyone.
                    </p>
                )}
            </div>
        </Card>
    );
}
