'use client';

import { useState } from 'react';
import Link from 'next/link';
import { type FormState, createEmptyForm } from '../types';
import CrewWidgetFormPanel from '../_components/CrewWidgetFormPanel';
import CrewWidgetPreviewPanel from '../_components/CrewWidgetPreviewPanel';
import { Separator } from '@/components/ui/separator';

export default function CrewWidgetAddPage()
{
	const [form, setForm] = useState<FormState>(createEmptyForm());

	return (
		<>
			<div className="studio-page__title-row">
				<h1 className="studio-page__title">크루 위젯 추가</h1>
				<Link href="/studio/donation/crew/widget/list" className="text-sm text-muted-foreground hover:text-foreground">＜ 목록으로</Link>
			</div>
			<div className="pt-4 pb-4">
				<Separator orientation="horizontal" />
			</div>
			<div className="crew-widget-layout">
				<CrewWidgetPreviewPanel form={form} />
				<Separator orientation="vertical" />
				<CrewWidgetFormPanel form={form} onFormChange={setForm} />
			</div>
		</>
	);
}