Plan Display

import React from "react";
import { PlanDisplay } from "@nimbus-ds/patterns";
import { CheckIcon, CloseIcon } from "@nimbus-ds/icons";
import { Box, Title, Text, Button } from "@nimbus-ds/components";
import { mockPlanDisplayLabels } from "lib/mocks/mock-labels";

const Example: React.FC = () => (
  <PlanDisplay minWidth={{ xs: "150px", md: "500px" }} mx="4">
    <PlanDisplay.Card>
      <PlanDisplay.Header
        subtitle="Punto de venta"
        title={
          <Box display="flex" gap="1">
            <Title as="h3" color="neutral-textLow">
              Plan
            </Title>
            <Title as="h3" color="neutral-textHigh">
              Básico
            </Title>
          </Box>
        }
      >
        <Title as="h5">Suscripción gratuita</Title>
        <Text fontWeight="bold" fontSize="highlight">
          1.5% costo por transacción
        </Text>
      </PlanDisplay.Header>
      <PlanDisplay.Content>
        {mockPlanDisplayLabels.slice(0, 4).map((label) => (
          <PlanDisplay.Bullet key={label} icon={<CheckIcon />}>
            {label}
          </PlanDisplay.Bullet>
        ))}
        {mockPlanDisplayLabels.slice(4).map((label) => (
          <PlanDisplay.Bullet key={label} icon={<CloseIcon />} disabled>
            {label}
          </PlanDisplay.Bullet>
        ))}
      </PlanDisplay.Content>
    </PlanDisplay.Card>
    <PlanDisplay.Card highlighted>
      <PlanDisplay.Header
        subtitle="Punto de venta"
        title={
          <Box display="flex" gap="1">
            <Title as="h3" color="neutral-textLow">
              Plan
            </Title>
            <Title as="h3" color="neutral-textHigh">
              Avanzado
            </Title>
          </Box>
        }
      >
        <Title as="h5">$14.999 / mes</Title>
        <Text fontWeight="bold" fontSize="highlight">
          0.15% costo por transacción
        </Text>
      </PlanDisplay.Header>
      <PlanDisplay.Content>
        {mockPlanDisplayLabels.map((label) => (
          <PlanDisplay.Bullet key={label} icon={<CheckIcon />}>
            {label}
          </PlanDisplay.Bullet>
        ))}
      </PlanDisplay.Content>
      <PlanDisplay.Footer>
        <Box
          display="flex"
          flexDirection="column"
          justifyContent="center"
          alignItems="center"
          width="100%"
          gap="2"
        >
          <Button appearance="primary">
            <Text fontSize="base" color="currentColor">
              Comenzar gratis*
            </Text>
          </Button>
          <Text fontSize="caption">
            *Al finalizar la prueba podrás elegir cancelar, continuar o cambiar
            de plan
          </Text>
        </Box>
      </PlanDisplay.Footer>
    </PlanDisplay.Card>
  </PlanDisplay>
);

export default Example;