import React from 'react';
import Breadcrumb from '../components/Breadcrumb';
import { BreadCrumbProps } from '../components/Breadcrumb/interface';
import { ApartmentRounded, DoNotStepOutlined, Home } from '@mui/icons-material';

const routes: BreadCrumbProps['items'] = [
  {
    id: '1',
    label: 'Home',
    href: '/home',
    icon: Home,
  },
  {
    id: '2',
    label: 'Products',
    href: '/products',
    icon: ApartmentRounded,
  },
  {
    id: '3',
    label: 'Shoes',
    href: '/shoes',
    icon: DoNotStepOutlined,
  },
  {
    id: '4',
    label: 'Sneakers',
    href: '/sneakers',
    icon: "faceAngry",
  }
]

const routesWithoutIcons: BreadCrumbProps['items'] = [
  {
    id: '1',
    label: 'Home',
    href: '/home',
  },
  {
    id: '2',
    label: 'Products',
    href: '/products',
  },
  {
    id: '3',
    label: 'Shoes',
    href: '/shoes',
  },
  {
    id: '4',
    label: 'Sneakers',
    href: '/sneakers',
  }
]

export default {
  title: 'Layout/Breadcrumb',
  component: Breadcrumb,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    items: {
      description: 'Adicione as rotas que irão aparecer, com as propriedades id, label, href e icon.',
    },
    onHomeClick: {
      description: 'Função que será chamada ao clicar no botão de Home.',
    },
    onPathClick: {
      description: 'Função que será chamada ao clicar em uma rota.',
    },
  }
}

export const Default = (args: BreadCrumbProps) => <Breadcrumb {...args} />
export const WithoutIcons = (args: BreadCrumbProps) => <Breadcrumb {...args} />

Default.args = {
  items: routes,
  onHomeClick: () => console.log('Home clicked', routes[0]),
  onPathClick: (item) => console.log('Path clicked', item),
}

WithoutIcons.args = {
  items: routesWithoutIcons.map(({ id, label, href }) => ({ id, label, href })),
  onHomeClick: () => console.log('Home clicked', routes[0]),
  onPathClick: (item) => console.log('Path clicked', item),
}