import { useState } from 'react';
import { ComboBox } from '@common/components/ui/ComboBox';

const Section = ({ title, desc, children }: { title: string; desc?: string; children: React.ReactNode }) => (
  <div className="mb-8">
    <h2 className="wing-section-header mb-1">{title}</h2>
    {desc && <p className="wing-section-desc mb-4">{desc}</p>}
    <div>{children}</div>
  </div>
);

const OPTIONS = [
  { value: 'prediction', label: '확산 예측' },
  { value: 'hns', label: 'HNS 분석' },
  { value: 'aerial', label: '항공 방제' },
  { value: 'weather', label: '해양 기상' },
  { value: 'scat', label: 'SCAT 조사' },
];

const ComboBoxSection = () => {
  const [value, setValue] = useState('prediction');
  return (
    <Section title="ComboBox" desc="검색 가능한 드롭다운 선택">
      <div className="max-w-[240px]">
        <ComboBox value={value} onChange={setValue} options={OPTIONS} placeholder="기능 선택..." />
      </div>
      <p className="wing-meta text-text-3 mt-2">선택값: {value}</p>
    </Section>
  );
};

export default ComboBoxSection;