import { Card, Flex, Typography } from 'antd';
import { useState } from 'react';
import type { SampleMeta } from '../../../../../widgets/core';
import { EmailInputUI } from '../EmailInputUI';

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'email-input',
  componentId: 'email-input',
  title: 'Email Input',
  description: '이메일 형식을 검증하는 기본형 이메일 입력 샘플입니다.',
  category: 'Inputs',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 40,
  features: ['docs'],
};

export function Sample() {
  const [email, setEmail] = useState('hello@example.com');

  return (
    <Card title="Email Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
      <Paragraph>
        <Text strong>이메일 형식</Text>일 때만 값이 확정됩니다.
      </Paragraph>

      <Flex vertical gap="small">
        <EmailInputUI
          value={email}
          onChange={(event) => {
            setEmail(event.target.value);
          }}
        />
        <Text>확정 이메일: {email}</Text>
        <Text type="secondary">형식이 맞지 않으면 이전 값으로 유지됩니다.</Text>
      </Flex>
    </Card>
  );
}
