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

export const JustifyContent = (_: any) => {
  return (
    <Stack spacing={4}>
      <Stack direction="row" spacing={2} justifyContent="flex-start">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border"> Item 2 </Card>
        <Card variant="border"> Item 3 </Card>
        <Card variant="border"> Item 4 </Card>
      </Stack>
      <Stack direction="row" spacing={2} justifyContent="center">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border"> Item 2 </Card>
        <Card variant="border"> Item 3 </Card>
        <Card variant="border"> Item 4 </Card>
      </Stack>
      <Stack direction="row" spacing={2} justifyContent="flex-end">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border"> Item 2 </Card>
        <Card variant="border"> Item 3 </Card>
        <Card variant="border"> Item 4 </Card>
      </Stack>
      <Stack direction="row" spacing={2} justifyContent="space-between">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border"> Item 2 </Card>
        <Card variant="border"> Item 3 </Card>
        <Card variant="border"> Item 4 </Card>
      </Stack>
      <Stack direction="row" spacing={2} justifyContent="space-around">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border"> Item 2 </Card>
        <Card variant="border"> Item 3 </Card>
        <Card variant="border"> Item 4 </Card>
      </Stack>
      <Stack direction="row" spacing={2} justifyContent="space-evenly">
        <Card variant="border"> Item 1 </Card>
        <Card variant="border"> Item 2 </Card>
        <Card variant="border"> Item 3 </Card>
        <Card variant="border"> Item 4 </Card>
      </Stack>
    </Stack>
  );
};
export default JustifyContent;