import React from 'react';

import Table from '@design-system/Table';
import TableCell from '@design-system/Table/components/TableCell';
import TableContainer from '@design-system/Table/components/TableContainer';
import TableHead from '@design-system/Table/components/TableHead';
import TableRow from '@design-system/Table/components/TableRow';
import { type Meta, type StoryObj } from '@storybook/react';

import SatisfactionTableContentSkeleton from './index';

const meta: Meta<typeof SatisfactionTableContentSkeleton> = {
  title:
    'Composed Components/PeopleExperience/SurveyResults/Satisfaction/SatisfactionTableContentSkeleton',
  component: SatisfactionTableContentSkeleton,
  parameters: {
    layout: 'padded',
  },
};

export default meta;

type Story = StoryObj<typeof SatisfactionTableContentSkeleton>;

export const Default: Story = {
  render: () => (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow headerRow>
            <TableCell>Header 1</TableCell>
            <TableCell>Header 2</TableCell>
            <TableCell>Header 3</TableCell>
          </TableRow>
        </TableHead>
        <SatisfactionTableContentSkeleton />
      </Table>
    </TableContainer>
  ),
  name: 'Default',
};
