{/* Title */}

Title * setData('title', e.target.value)} placeholder="What's new?" className={cn(errors.title && 'border-destructive')} /> {errors.title && (

{errors.title}

)}

{/* Body */}

Body *

setData('body', e.target.value)}
                            rows={10}
                            placeholder="Describe the feature update or announcement…"
                            className={cn(
                                'resize-y',
                                errors.body && 'border-destructive',
                            )}
                        />
                        {errors.body && (
                            <p className="text-destructive text-xs">
                                {errors.body}
                            </p>
                        )}
                    </div>

{/* Tags */}
                    <div className="space-y-1.5">
                        <label className="text-foreground text-sm font-medium">
                            Tags
                        </label>
                        <Input
                            value={data.tags}
                            onChange={(e) => setData('tags', e.target.value)}
                            placeholder="e.g. billing, mobile, api  (comma-separated)"
                        />
                        <p className="text-muted-foreground text-xs">
                            Separate multiple tags with commas.
                        </p>
                    </div>

{/* Publish date */}
                    <div className="space-y-1.5">
                        <label className="text-foreground text-sm font-medium">
                            Publish date
                        </label>
                        <Input
                            type="datetime-local"
                            value={data.published_at}
                            onChange={(e) =>
                                setData('published_at', e.target.value)
                            }
                            className={cn(
                                errors.published_at && 'border-destructive',
                            )}
                        />
                        <p className="text-muted-foreground text-xs">
                            Leave blank to save as draft. Set a future time to
                            schedule.
                        </p>
                        {errors.published_at && (
                            <p className="text-destructive text-xs">
                                {errors.published_at}
                            </p>
                        )}
                    </div>

{/* Actions */}
                    <div className="border-border flex items-center justify-between border-t pt-5">
                        <Link
                            href="/admin/announcements"
                            className="text-muted-foreground hover:text-foreground text-sm transition-colors"
                        >
                            Cancel
                        </Link>
                        <div className="flex items-center gap-2">
                            {/* Save as draft shortcut */}
                            {data.published_at && (
                                <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    disabled={processing}
                                    onClick={() => {
                                        setData('published_at', '');
                                        // submit after state settles
                                        setTimeout(() => {
                                            (
                                                document.querySelector(
                                                    'form',
                                                ) as HTMLFormElement
                                            )?.requestSubmit();
                                        }, 0);
                                    }}
                                >
                                    Save as draft
                                </Button>
                            )}
                            <Button
                                type="submit"
                                disabled={processing}
                                size="sm"
                                className="gap-2"
                            >
                                {data.published_at ? (
                                    <>
                                        <Radio className="h-3.5 w-3.5" />
                                        {isEdit ? 'Update' : 'Publish'}
                                    </>
                                ) : (
                                    <>
                                        <Save className="h-3.5 w-3.5" />
                                        Save draft
                                    </>
                                )}
                            </Button>
                        </div>
                    </div>
                </form>
            </div>
        </AdminLayout>
    );
}