import React from 'react';
import { useRouter } from 'next/router';

import { getImportsString, getPropsString } from '../helpers';

import Playground from '../Playground/Playground';
import { Breadcrumbs, Link, Typography } from '@/mui/components';

function BreadcrumbsSection() {
  const router = useRouter();

  return (
    <Playground
      title="Breadcrumbs"
      initialState={[
        {
          type: 'select',
          stateId: 'separator',
          options: ['default', '/'],
          selected: 'default',
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          separator: state.separator === 'default' ? undefined : state.separator,
        };

        const propsString = getPropsString({
          ...props,
        });
        const importsList = getImportsString([[['Breadcrumbs', 'Link', 'Typography']]]);

        return {
          component: (
            <Breadcrumbs {...props}>
              <Link
                color="inherit"
                href={router.pathname}
                onClick={(event) => {
                  event.preventDefault();
                  return null;
                }}
              >
                MUI
              </Link>
              <Link
                color="inherit"
                href={router.pathname}
                onClick={(event) => {
                  event.preventDefault();
                  return null;
                }}
              >
                Core
              </Link>
              <Typography variant="body1" color="text.primary">
                Breadcrumb
              </Typography>
            </Breadcrumbs>
          ),
          code: `${importsList}
<Breadcrumbs${propsString}>
  <Link 
    color="inherit" 
    href="#breadcrumbs" 
    onClick={(event) => {
      event.preventDefault();
      return null;
    }}
  >
    MUI
  </Link>
  <Link
    color="inherit"
    href="#breadcrumbs"
    onClick={(event) => {
      event.preventDefault();
      return null;
    }}
  >
    Core
  </Link>
  <Typography color="text.primary">
    Breadcrumb
  </Typography>
</Breadcrumbs>`,
        };
      }}
    />
  );
}

export default BreadcrumbsSection;
