import { Screen } from "design-system/components/Screen";
import { Text } from "design-system/components/Text";
import { Box } from "design-system/primitives/Box/Box";
import { Row } from "design-system/primitives/Row";
import { Stack } from "design-system/primitives/Stack";

export function HomeRow() {
  return (
    <Screen as="ScrollView" options={{ title: "Stack" }}>
      <Stack space="40px">
        <Stack space="12px" separator={<Box height={5} backgroundColor="black" />}>
          <Text variant="header">Rows</Text>
          <Row space="12px" separator={<Box width={3} height={50} backgroundColor="divider" />}>
            <Box width={50} height={50} backgroundColor="error" />
            <Box width={50} height={50} backgroundColor="error" />
            <Box width={50} height={50} backgroundColor="error" />
            <Box flex={1} height={50} backgroundColor="error" />
          </Row>
          <Row space="12px" separator={<Box width={3} height={50} backgroundColor="divider" />}>
            <Box width={50} height={40} backgroundColor="error" />
            <Box width={80} height={50} backgroundColor="error" />
            <Box width={50} height={20} backgroundColor="error" />
          </Row>
          <Row
            space="12px"
            alignVertical="top"
            separator={<Box width={3} height={50} backgroundColor="divider" />}
          >
            <Box width={50} height={40} backgroundColor="error" />
            <Box width={80} height={50} backgroundColor="error" />
            <Box width={50} height={20} backgroundColor="error" />
          </Row>
        </Stack>

        <Stack space="12px" separator={<Box height={5} backgroundColor="black" />}>
          <Text variant="header">Wrapped Rows</Text>
          <Box>
            <Row horizontalSpace="24px" wrap verticalSpace="5px" alignHorizontal="justify">
              <Box width={50} height={50} backgroundColor="error" />
              <Box width={50} height={50} backgroundColor="error" />
              <Box width={50} height={50} backgroundColor="error" />
              <Box width={50} height={50} backgroundColor="error" />
              <Box width={50} height={50} backgroundColor="error" />
              <Box width={50} height={50} backgroundColor="error" />
            </Row>
          </Box>
          <Box>
            <Row wrap space="12px" alignVertical="top">
              <Box width={60} height={50} backgroundColor="error" />
              <Box width={80} height={50} backgroundColor="error" />
              <Box width={20} height={20} backgroundColor="error" />
              <Box width={100} height={50} backgroundColor="error" />
              <Box width={30} height={50} backgroundColor="error" />
              <Box width={20} height={50} backgroundColor="error" />
              <Box width={80} height={30} backgroundColor="error" />
            </Row>
          </Box>

          <Box>
            <Row wrap space="12px" alignVertical="bottom">
              <Box width={60} height={50} backgroundColor="error" />
              <Box width={80} height={50} backgroundColor="error" />
              <Box width={20} height={20} backgroundColor="error" />
              <Box width={100} height={50} backgroundColor="error" />
              <Box width={30} height={50} backgroundColor="error" />
              <Box width={20} height={50} backgroundColor="error" />
              <Box width={80} height={30} backgroundColor="error" />
            </Row>
          </Box>
        </Stack>
      </Stack>
    </Screen>
  );
}