import React from 'react'
import { Button, Dropdown, Menu } from 'antd'
import { DownOutlined } from '@ant-design/icons'

interface SprintTierButtonProps {
    selectedTier: string
    onSelectTier: (tier: string) => void
}

const TierButton: React.FC<SprintTierButtonProps> = ({
    selectedTier,
    onSelectTier,
}) => {
    const tiers = ['QA', 'In Progress', 'Code Review', 'Blocked']

    const handleMenuClick = (tier: string): void => {
        onSelectTier(tier)
    }

    const menu = (
        <Menu
            onClick={(e) => {
                handleMenuClick(e.key)
            }}
        >
            {tiers.map((tier) => (
                <Menu.Item key={tier}>{tier}</Menu.Item>
            ))}
        </Menu>
    )

    return (
        <Dropdown overlay={menu} trigger={['click']}>
            <Button>
                {selectedTier !== '' ? selectedTier : 'Select Tier'}{' '}
                <DownOutlined />
            </Button>
        </Dropdown>
    )
}

export default TierButton
