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

interface ReferralCodeCardProps {
  code: string;
  onCopy?: () => void;
  onShare?: () => void;
}

export default function ReferralCodeCard({
  code = "PR0T0-8821",
  onCopy,
  onShare,
}: ReferralCodeCardProps) {
  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%]">
          REFERRAL CODE
        </span>
      </div>

      {/* Description */}
      <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
        Share your unique code to earn 10% commission on all friend activities.
      </p>

      {/* Code Display and Buttons */}
      <div className="flex flex-col gap-4">
        {/* Code Display Row */}
        <div className="flex items-center gap-2">
          {/* Code Container */}
          <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-text-primary dark:text-white leading-[150%] font-jetbrains">
              {code}
            </span>
          </div>

          {/* Copy Button */}
          <Button
            isIconOnly
            onClick={onCopy}
            className="bg-text-primary dark:bg-white rounded-xl w-[46px] h-[46px] min-w-[46px]"
          >
            <Image src="/icon1.svg" alt="Copy" width={20} height={20} />
          </Button>
        </div>

        {/* Share Button */}
        <BorderedButton
          size="lg"
          fullWidth
          onClick={onShare}
          isTheme
        >
          Share
        </BorderedButton>
      </div>
    </div>
  );
}