import { Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import Link from '.';

const meta: Meta<typeof Link> = {
  component: Link,
  title: 'Design System/Link',
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof Link>;

export const Default: Story = {
  args: {
    href: 'https://www.google.com',
    children: 'Link',
    hasIcon: true,
    target: '_blank',
  },
};

export const NoIcon: Story = {
  args: {
    href: '#',
    children: 'Link',
    hasIcon: false,
  },
};

export const Disabled: Story = {
  args: {
    href: '#',
    children: 'Link',
    disabled: true,
  },
};

export const CustomTypograhy: Story = {
  args: {
    href: '#',
    children: (
      <Typography
        variant="globalM"
        sx={theme => ({ color: theme.palette.base?.blueBrand[400] })}
      >
        Global M Typography
      </Typography>
    ),
    iconSize: 24,
    hasIcon: true,
  },
};