import Image from "next/image";
import { Button } from "@heroui/react";

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

export default function BindInviteCard({
  placeholder = "ENTER CODE",
  onApply,
}: BindInviteCardProps) {
  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="/icon0.svg" alt="" width={24} height={24} />
        <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
          BIND INVITE
        </span>
      </div>

      {/* Description */}
      <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
        Were you invited? Enter the code here to boost your base yield by +0.5%.
      </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">
            <span className="text-body-default font-bold text-[#d1d5db] dark:text-gray-500 leading-[150%] font-jetbrains">
              {placeholder}
            </span>
          </div>
        </div>

        {/* Apply Button */}
        <Button
          onClick={() => onApply?.("")}
          className="bg-text-primary dark:bg-white rounded-xl h-11 text-body-small font-bold text-white dark:text-gray-900"
        >
          Apply
        </Button>
      </div>
    </div>
  );
}