import type { Meta, Story } from '@storybook/react';

import { ASSETS_URL } from '../../../../consts/common';
import { TableTextGroup } from '../../../table-text-group';
import type { TableTextGroupProps } from '../../../table-text-group';

export default {
  component: TableTextGroup,
  title: 'Data Grid/In Cells/Login Status'
} as Meta;

const Template: Story<TableTextGroupProps> = args => <TableTextGroup {...args} />;

export const TextGroup = Template.bind({});
TextGroup.args = {
  title: 'Title',
  subtitle: 'Subtitle'
};

export const UserInitials = Template.bind({});
UserInitials.args = {
  title: 'Name Surname',
  subtitle: 'Subtitle',
  avatarProps: {
    backgroundColor: '#6BB9D7',
    initials: 'NS',
    size: 'small'
  }
};

export const UserOffline = Template.bind({});
UserOffline.args = {
  title: 'Apr 22, 2021 8:12 AM',
  avatarProps: {
    'aria-label': 'Austria',
    size: 'small',
    src: `${ASSETS_URL}/flags/austria.svg`
  }
};

export const UserOnline = Template.bind({});
UserOnline.args = {
  title: 'Online',
  avatarProps: {
    'aria-label': 'Austria',
    size: 'small',
    src: `${ASSETS_URL}/flags/austria.svg`
  },
  badgeProps: {
    color: 'primary'
  }
};