水平メニュー（Horizontal Menu）

'use client';
import { useState } from 'react';
import { ConfigProvider, Menu } from 'antd';
import { HomeOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const items = [
  { key: 'home', icon: <HomeOutlined />, label: 'ホーム' },
  {
    key: 'services',
    icon: <AppstoreOutlined />,
    label: 'サービス',
    children: [
      { key: 'web', label: 'Web制作' },
      { key: 'app', label: 'アプリ開発' },
    ],
  },
  { key: 'settings', icon: <SettingOutlined />, label: '設定' },
];

export function AntMenuDemo() {
  const [current, setCurrent] = useState('home');
  return (
    <ConfigProvider theme={{ token: { colorPrimary: '#1677ff' } }}>
      <Menu
        mode="horizontal"
        selectedKeys={[current]}
        onClick={(e) => setCurrent(e.key)}
        items={items}
      />
    </ConfigProvider>
  );
}