import { useState } from 'react';
import type { SampleMeta } from '../../../../../widgets/core';
import { EmailInputUI } from '../EmailInputUI';

export const sampleMeta: SampleMeta = {
  id: 'email-input-base',
  componentId: 'email-input',
  title: 'Email Input',
  description: '이메일 형식을 검증하는 입력 컴포넌트입니다.',
  category: 'Inputs',
  kind: 'base',
  variantLabel: 'Base',
  order: 40,
  features: ['docs'],
};

export function Sample() {
  const [value, setValue] = useState('ops@example.com');

  return (
    <EmailInputUI
      value={value}
      onChange={(event) => {
        setValue(event.target.value);
      }}
    />
  );
}
