import { Meta } from "@storybook/react";
import * as svgIcons from "@progress/kendo-svg-icons";
import { SvgIcon } from "@progress/kendo-react-common";

export default {
  title: "Design System/Common Utilities/Icons/Icons",
  component: SvgIcon,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'SvgIcon List \n\n```javascript\nimport { SvgIcon } from "@renault-ui-library"\n```',
      },
    },
  },
} as Meta;

export const Default = (): JSX.Element => (
  <>
    <div className="svg-wrapper">
      {Object.keys(svgIcons).map((key, index) => {
        const icon = (svgIcons as Record<string, any>)[key];
        return (
          <div key={index}>
            <SvgIcon icon={icon} size="large" />
            <p className="title">{key}</p>
          </div>
        );
      })}
    </div>
    <style>
      {`
        .svg-wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin: 0;
          padding: 0;
        }
        .svg-wrapper div {
          display: block;
          margin: 10px;
          text-align: center;
          width: 150px;
          height: 60px;
          font-size: 12px;
        }
        .svg-wrapper .title {
          margin-top: 0.5rem;
        }`}
    </style>
  </>
);