import { lighten, Pill, useMantineColorScheme } from "@mantine/core";
import { DealTagSchema } from "@/lib/client";

type Props = {
    tag: Partial<DealTagSchema>;
};

const DealTag = ({ tag }: Props) => {
    const theme = useMantineColorScheme();
    const isInherit = tag.tagColor!.backgroundColor === "inherit";

    let color = tag.tagColor!.color;
    const backgroundColor = tag.tagColor!.backgroundColor;

    if (!(theme.colorScheme === "dark" || isInherit)) {
        color = lighten(color, 0.95);
    }

    return (
        <Pill
            key={tag.id}
            style={{
                opacity: 0.7,
                color,
                backgroundColor,
                border: "1px solid",
                borderColor: color,
            }}>
            {tag.name}
        </Pill>
    );
};

export default DealTag;
