"use client";

import clsx from "clsx";

import { Typography } from "..";

import styles from "./Chip.module.scss";

export interface ChipProps {
  text: string;
  className?: string;
  active?: boolean;
  onClick?: () => void;
}

export default function Chip({ text, className, active, onClick }: ChipProps) {
  return (
    <div
      className={clsx(styles.chip, className, {
        [styles.active]: active,
      })}
      onClick={onClick}
    >
      <Typography
        size="sm"
        weight="medium"
        color="secondary"
        className={styles.text}
      >
        {text}
      </Typography>
    </div>
  );
}
