'use client';
import React from 'react';
import { cn } from '@/lib';

type TagProps = {
  options: {
    label: string;
    value: string;
    color?: string;
  }[];
} & React.HTMLAttributes<HTMLDivElement>;

export default function Tags(props: TagProps) {
  const { options, ...others } = props;
  return (
    <div
      {...others}
      className={cn('flex flex-wrap gap-1.25', others.className)}
    >
      {options.map((option) => (
        <span
          key={option.value}
          className={cn(
            'inline-block h-5.25 rounded-[5px] bg-black/40 px-1.5 text-center text-xs leading-[21px]',
            option.color
          )}
        >
          {option.label}
        </span>
      ))}
    </div>
  );
}
