import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  FormGrid,
  Input,
  PageShell,
  Select,
  Textarea,
} from '@/ui';

export function FormPageTemplate() {
  return (
    <PageShell title="表单页面" description="表单使用可见标签和统一控件高度。">
      <Card>
        <CardHeader title="基础信息" description="只保留用户需要理解的字段。" />
        <CardContent>
          <FormGrid>
            <Input id="name" label="名称" placeholder="请输入名称" />
            <Select id="type" label="类型" defaultValue="default">
              <option value="default">默认类型</option>
            </Select>
          </FormGrid>
          <Textarea
            id="description"
            label="说明"
            placeholder="补充必要说明"
            style={{ marginTop: 14 }}
          />
        </CardContent>
        <CardFooter>
          <Button variant="outline">取消</Button>
          <Button>保存</Button>
        </CardFooter>
      </Card>
    </PageShell>
  );
}