import { Avatar } from './Avatar';
import { Stack } from '../Stack/Stack';

export function Sizes() {
  return (
    <Stack direction="horizontal" gap="sm" align="center">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <Avatar key={size} name="Ada Lovelace" size={size} />
      ))}
    </Stack>
  );
}

export function Fallbacks() {
  return (
    <Stack direction="horizontal" gap="sm" align="center">
      <Avatar name="Ada Lovelace" />
      <Avatar name="gokce" />
      <Avatar />
      {/* A broken URL falls back to initials rather than a broken image. */}
      <Avatar name="Grace Hopper" src="https://example.invalid/missing.png" />
    </Stack>
  );
}

export function Shapes() {
  return (
    <Stack direction="horizontal" gap="sm" align="center">
      <Avatar name="Kibris Yazilim" shape="circle" size="lg" />
      <Avatar name="Kibris Yazilim" shape="square" size="lg" />
    </Stack>
  );
}

export function Group() {
  return (
    <Stack direction="horizontal" gap="none" align="center">
      {['Ada Lovelace', 'Grace Hopper', 'Alan Turing'].map((name, index) => (
        <Avatar
          key={name}
          name={name}
          size="md"
          style={{
            marginLeft: index === 0 ? 0 : -10,
            boxShadow: '0 0 0 2px var(--ds-color-surface)',
          }}
        />
      ))}
    </Stack>
  );
}