import { Card, Group, Pill, Stack, Text } from "@mantine/core";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useDrawersContext } from "@/drawers/DrawersContext";
import { DealSchema } from "@/lib/client";
import styles from "./DealCard.module.css";

type Props = {
    deal: DealSchema;
};

const DealCard = ({ deal }: Props) => {
    const { dealsCrud } = useDealsContext();
    const { openDrawer } = useDrawersContext();

    const onClick = () => {
        openDrawer({ key: "dealEditorDrawer", props: { deal, dealsCrud } });
    };

    return (
        <Card
            onClick={onClick}
            className={styles.container}>
            <Text c={"dodgerblue"}>{deal.name}</Text>
            <Stack gap={0}>
                <Text>Wb электросталь</Text>
                <Text>19 000 руб.</Text>
                <Text>130 тов.</Text>
            </Stack>
            <Group gap={"xs"}>
                <Pill className={styles["first-tag"]}>Срочно</Pill>
                <Pill className={styles["second-tag"]}>Бесплатно</Pill>
            </Group>
        </Card>
    );
};

export default DealCard;
