"use client";

import { useState } from "react";
import Image from "next/image";
import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";

interface BindInviteCardProps {
  placeholder?: string;
  onApply?: (code: string) => void;
}

export default function BindInviteCard({
  placeholder,
  onApply,
}: BindInviteCardProps) {
  const { t } = useApp();
  const [code, setCode] = useState("");

  const handleApply = () => {
    if (code.trim()) {
      onApply?.(code.trim());
    }
  };

  return (
    <div className="flex-[32] bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
      {/* Header */}
      <div className="flex items-center gap-3 h-6">
        <Image src="/components/card/icon2.svg" alt="" width={24} height={24} />
        <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
          {t("points.bindInvite")}
        </span>
      </div>

      {/* Description */}
      <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
        {t("points.bindInviteDescription")}
      </p>

      {/* Input and Button */}
      <div className="flex flex-col gap-4">
        {/* Input Field */}
        <div className="flex items-center gap-2">
          <div className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 px-4 py-3 h-[46px] flex items-center">
            <input
              type="text"
              value={code}
              onChange={(e) => setCode(e.target.value.toUpperCase())}
              placeholder={placeholder || t("points.enterCode")}
              className="w-full bg-transparent text-body-default font-bold text-text-primary dark:text-white leading-[150%] font-inter outline-none placeholder:text-[#d1d5db] dark:placeholder:text-gray-500"
            />
          </div>
        </div>

        {/* Apply Button */}
        <Button
          onClick={handleApply}
          disabled={!code.trim()}
          className="bg-text-primary dark:bg-white rounded-xl h-11 text-body-small font-bold text-white dark:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {t("points.apply")}
        </Button>
      </div>
    </div>
  );
}