import React from "react"
import { cva } from "class-variance-authority"

import { cn } from "../../design-lib/utils"

function StatusDot({
  variant = "default",
  size = "default",
  label,
}: {
  variant?: "default" | "error" | "building" | "queued" | "ready" | "cancelled"
  size?: "default" | "sm" | "lg"
  label?: boolean
}) {
  const StatusDotVariants = cva("rou rounded-full", {
    variants: {
      variant: {
        default: "bg-success",
        error: "bg-error",
        building: "bg-warning",
        queued: "bg-secondary",
        ready: "bg-green-500",
        cancelled: "bg-secondary",
      },
      size: {
        default: "h-3 w-3",
        sm: "h-2 w-2",
        lg: "h-4 w-4",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  })

  return (
    <div className="relative flex items-center space-x-2">
      <div
        className={cn(StatusDotVariants({ variant: variant, size: size }))}
      />
      {label && <div className="text-sm capitalize">{variant}</div>}
    </div>
  )
}

export default StatusDot