import { Meta } from "@storybook/react";
import { LogoProps } from "./LogoProps";
import Logo from "./Logo";
import brandLogo01 from "../../public/logos/logo-01.png";
import brandLogo02 from "../../public/logos/logo-02.png";
import brandLogo03 from "../../public/logos/logo-03.png";
import brandLogo04 from "../../public/logos/logo-04.png";

export default {
  title: "Design System/Logo",
  component: Logo,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'This Logo component is used for branding and visual identity purposes. \n\n```javascript\nimport { Logo } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    className: {
      control: { type: "text" },
      description: "Specifies the className attribute for styling purposes.",
    },
    src: {
      control: { type: "text" },
      description: "Specifies the image source.",
    },
    alt: {
      control: { type: "text" },
      description: "Specifies the image alt text.",
    },
    width: {
      control: { type: "text" },
      description: "Specifies the image width.",
    },
    height: {
      control: { type: "text" },
      description: "Specifies the image height.",
    },
  },
} as Meta;

export const Default = (args: LogoProps): JSX.Element => (
  <>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <Logo {...args} />
    </div>
    <div style={{ display: "flex", justifyContent: "center" }}>
      <Logo src={brandLogo01.src} alt="Logo" width="400px" />
      <Logo src={brandLogo02.src} alt="Logo" width="400px" />
    </div>
    <div style={{ display: "flex", justifyContent: "center" }}>
      <Logo src={brandLogo03.src} alt="Logo" width="200px" />
      <Logo src={brandLogo04.src} alt="Logo" width="200px" />
    </div>
  </>
);

Default.args = {
  dataTestId: "logo-data-testid",
  className: "logo-class",
  src: "https://cdn.cookielaw.org/logos/1058e0b9-ee95-4d43-8292-3dae40ce5c3c/8696d0de-6fa6-41d3-bdf2-b0608ded0691/5b13e569-bc03-49a3-acae-42b5d4c0fbed/renault.png",
  alt: "Logo",
  width: "130px",
};