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

export const Spacing = (_: any) => {
  return (
    <Stack spacing={6}>
      <Stack direction="row">
        <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={4}>
        <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={8}>
        <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={12}>
        <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 Spacing;
