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

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'multi-input',
  componentId: 'multi-input',
  title: 'Multi Input',
  description: '3자리 / 4자리 / 4자리 입력을 조합하는 기본형 multi input 샘플입니다.',
  category: 'Inputs',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 30,
  features: ['docs'],
};

export function Sample() {
  const [value, setValue] = useState('01012345678');

  return (
    <Card title="Multi Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
      <Paragraph>
        값을 <Text strong>3자리 / 4자리 / 4자리</Text> 입력으로 나누어 조합합니다.
      </Paragraph>

      <Flex vertical gap="small">
        <MultiInputUI
          value={value}
          onChange={(event) => {
            setValue(event.target.value);
          }}
        />
        <Text>확정 값: {value}</Text>
        <Text type="secondary">각 칸은 정해진 자리수일 때만 확정되고 다음 칸으로 이동합니다.</Text>
      </Flex>
    </Card>
  );
}