import React from 'react';
import Card from '@digigov/ui/content/Card';
import { Stack } from '@digigov/ui/layouts/Stack';

export const AlignItems = (_: any) => {
  return (
    <Stack spacing={4}>
      <Stack direction="row" spacing={2} alignItems="flex-start">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border" padding={8}>
          {' '}
          Item 2{' '}
        </Card>
        <Card variant="border"> Item 3 </Card>
      </Stack>
      <Stack direction="row" spacing={2} alignItems="center">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border" padding={8}>
          {' '}
          Item 2{' '}
        </Card>
        <Card variant="border"> Item 3 </Card>
      </Stack>
      <Stack direction="row" spacing={2} alignItems="flex-end">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border" padding={8}>
          {' '}
          Item 2{' '}
        </Card>
        <Card variant="border"> Item 3 </Card>
      </Stack>
      <Stack direction="row" spacing={2} alignItems="baseline">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border" padding={8}>
          {' '}
          Item 2{' '}
        </Card>
        <Card variant="border"> Item 3 </Card>
      </Stack>
      <Stack direction="row" spacing={2} alignItems="stretch">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border" padding={8}>
          {' '}
          Item 2{' '}
        </Card>
        <Card variant="border"> Item 3 </Card>
      </Stack>
    </Stack>
  );
};
export default AlignItems;