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

import UserAvatar from '.';

const meta: Meta<typeof UserAvatar> = {
  component: UserAvatar,
  title: 'Composed Components/UserAvatar',
  tags: ['autodocs'],
  args: {
    user: {
      employeeInternalId: '123456',
      firstName: 'John',
      lastName: 'Doe',
      profilePicture:
        'https://images.unsplash.com/photo-1633332755192-727a05c4013d',
      email: 'john.doe@example.com',
    },
  },
};

export default meta;

type Story = StoryObj<typeof UserAvatar>;

export const Default: Story = {
  args: {},
};

export const WithInternalId: Story = {
  args: {
    profileProps: {
      showEmployeeInternalId: true,
    },
  },
};

export const WithEmail: Story = {
  args: {
    profileProps: {
      showEmail: true,
    },
  },
};

export const WithInternalIdAndEmail: Story = {
  args: {
    user: {
      employeeInternalId: '123456',
      firstName: 'John',
      lastName:
        'Doeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
      profilePicture:
        'https://images.unsplash.com/photo-1633332755192-727a05c4013d',
      email: 'john.doe@example.com',
    },
    profileProps: {
      showEmployeeInternalId: true,
      showEmail: true,
    },
  },
  decorators: [
    Story => (
      <Box sx={{ width: 400 }}>
        <Story />
      </Box>
    ),
  ],
};