"use client";

import { cn } from "@/lib/utils";
import ChatBoldIcon from "./ChatBoldIcon";

interface ViewOnceToggleProps {
  value: boolean;
  onChange: (value: boolean) => void;
  disabled?: boolean;
}

export default function ViewOnceToggle({
  value,
  onChange,
  disabled,
}: ViewOnceToggleProps) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={() => onChange(!value)}
      className={cn(
        "chat-timer-glass gentle-transition flex h-11 w-11 shrink-0 items-center justify-center rounded-full",
        value && "chat-timer-glass--active bg-[#ff9500]/20 text-[#ff9500]",
        !value && "text-neutral-500 dark:text-neutral-400",
        disabled && "opacity-40"
      )}
      aria-label="یک‌بار مصرف"
      title={value ? "یک‌بار مصرف فعال" : "یک‌بار مصرف"}
    >
      <span className="relative flex items-center justify-center">
        <ChatBoldIcon
          name="eye"
          size={20}
          className={value ? "text-[#ff9500]" : undefined}
        />
        {value && (
          <span className="absolute -right-1 -top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-[#ff9500] text-[8px] font-bold text-white">
            ۱
          </span>
        )}
      </span>
    </button>
  );
}
