import React from 'react';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { Select, Space, Table, Progress } from 'antd';

const onChange = (key: string) => {
  console.log(key);
};

const handleChangeAge = (value: string) => {
    console.log(`selected ${value}`);
};

function createData(
    name: string,
    calories: number,
    fat: number,
    carbs: number,
    protein: number,
) {
    return { name, calories, fat, carbs, protein };
}

const rows = [
    createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
    createData('Eclair', 262, 16.0, 24, 6.0),
    createData('Cupcake', 305, 3.7, 67, 4.3),
    createData('Gingerbread', 356, 16.0, 49, 3.9),
];

const columns = [
    {
        title: 'Dessert (100g serving)',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: 'Calories',
        dataIndex: 'calories',
        key: 'calories',
    },
    {
        title: 'Fat (g)',
        dataIndex: 'fat',
        key: 'fat',
    },
    {
        title: 'Carbs (g)',
        dataIndex: 'carbs',
        key: 'carbs',
    },
    {
        title: 'Protein (g)',
        dataIndex: 'protein',
        key: 'protein',
    },
];

const items: TabsProps['items'] = [
  {
    key: '1',
    label: `Item One`,
    children: (
        <Space wrap>
          <Select
              defaultValue="10"
              style={{ width: 120 }}
              onChange={handleChangeAge}
              options={[
                { value: '10', label: 'Ten' },
                { value: '20', label: 'Twenty' },
                { value: '30', label: 'Thirty' },
              ]}
          />
        </Space>
    ),
  },
  {
    key: '2',
    label: `Item Two`,
    children: (
        <Table dataSource={rows} columns={columns} />
    ),
  },
  {
    key: '3',
    label: `Item Three`,
    children: (
        <Space wrap>
            <Progress type="circle" percent={75} />
        </Space>
    ),
  },
];

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </main>
  )
}