import React from 'react'



import { IDropdown, IDropdownItem } from '../Dropdown/Dropdown.interface'
import Dropdown, { DropdownItem } from './Dropdown.component'
import Icon from './../../atoms/Icon/Icon.component'

import type { Meta, Story, StoryObj } from '@storybook/react'





// Your component-specific styles should be imported here if needed

// Meta information for Storybook
export default {
  title: 'Components/Dropdown',
  component: Dropdown,
} as Meta;

// Template for Dropdown component
const Template: Story<IDropdown> = (args) => (
  <Dropdown {...args} >
    {/* Add DropdownItems or other content here */}
    <DropdownItem style={{ padding: '8px' }} className='justify-content-center'>PT</DropdownItem>
    <DropdownItem style={{ padding: '8px' }} className='justify-content-center'>DE</DropdownItem>
    {/* Add more items as needed */}
  </Dropdown >
);

// Story for Dropdown component
export const BasicDropdown = Template.bind({});
BasicDropdown.args = {
  title: 'EN',
  icon: <Icon icon="icon-arrow-down" />, // Replace with your actual icon component
  theme: 'default', // Replace with your theme
};

// Template for DropdownItem component
const ItemTemplate: Story<IDropdownItem> = (args) => (
  <DropdownItem {...args}>
    {/* Add content for the DropdownItem */}
    {args.children}
  </DropdownItem>
);

// Story for DropdownItem component
export const BasicDropdownItem = ItemTemplate.bind({});
BasicDropdownItem.args = {
  children: 'Dropdown Item',
  icon: <Icon icon="icon-arrow-down" />, // Replace with your actual item icon component
  disabled: false,
  section: false,
  onClick: () => console.log('Item Clicked'), // Replace with your actual click handler
};