import { DotsThreeVertical } from '@phosphor-icons/react';
import {
    A,
    Avatar,
    Box,
    BoxLayout,
    Button,
    CodeBlock,
    Flex,
    H2,
    ItemsTable,
    Menu,
    Table,
    Text,
} from '../../../..';
import OpizeLogo from '../../assets/opize-logo.png';

export const PageContent = () => {
    return (
        <BoxLayout>
            <Flex.Column gap="32px">
                <ItemsTable>
                    {Array.from({ length: 8 }).map((_, index) => (
                        <ItemsTable.Row key={index}>
                            <ItemsTable.Row.Avatar
                                icon={
                                    <Avatar
                                        src={OpizeLogo}
                                        size="32px"
                                    />
                                }
                                name={`Opize User ${index}`}
                                label="hello@opize.me"
                            />
                            <ItemsTable.Row.Menu>
                                <Menu.Option>Option 1</Menu.Option>
                                <Menu.Option>Option 2</Menu.Option>
                                <Menu.Option>Option 3</Menu.Option>
                            </ItemsTable.Row.Menu>
                        </ItemsTable.Row>
                    ))}
                </ItemsTable>
                <Flex.Column>
                    <Box
                        title="Box Title"
                        footer={
                            <>
                                <Text>
                                    Box Footer Components <A>Link</A>
                                </Text>
                                <Button>Button</Button>
                            </>
                        }
                    >
                        Box Content
                    </Box>
                </Flex.Column>
                <Flex.Column gap="8px">
                    <H2>Table</H2>
                    <Table>
                        <Table.Head>
                            <Table.Row>
                                <Table.Column>Column 1</Table.Column>
                                <Table.Column>Column 2</Table.Column>
                                <Table.Column align="right">Column 3</Table.Column>
                            </Table.Row>
                        </Table.Head>
                        <Table.Body>
                            {Array.from({ length: 3 }).map((_, index) => (
                                <Table.Row key={index}>
                                    <Table.Cell>Cell {index}</Table.Cell>
                                    <Table.Cell>Cell {index}</Table.Cell>
                                    <Table.Cell align="right">
                                        <Menu>
                                            <Menu.Trigger
                                                variant="tertiary"
                                                size="small"
                                                shape="round"
                                                iconOnly
                                            >
                                                <DotsThreeVertical />
                                            </Menu.Trigger>
                                            <Menu.Content>
                                                <Menu.Option>Option 1</Menu.Option>
                                                <Menu.Option>Option 1</Menu.Option>
                                                <Menu.Option>Option 1</Menu.Option>
                                            </Menu.Content>
                                        </Menu>
                                    </Table.Cell>
                                </Table.Row>
                            ))}
                        </Table.Body>
                    </Table>
                </Flex.Column>
                <CodeBlock>{'a'.repeat(200)}</CodeBlock>
            </Flex.Column>
        </BoxLayout>
    );
};