"use client";

import { Button } from "@heroui/react";
import BorderedButton from "@/components/common/BorderedButton";
import { useApp } from "@/contexts/AppContext";

interface EarnOpportunityCardProps {
  pointsLabel: string;
  title: string;
  subtitle: string;
  metricLabel: string;
  metricValue: string;
  buttonText: string;
  onButtonClick?: () => void;
}

export default function EarnOpportunityCard({
  pointsLabel,
  title,
  subtitle,
  metricLabel,
  metricValue,
  buttonText,
  onButtonClick,
}: EarnOpportunityCardProps) {
  const { t } = useApp();
  return (
    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
      {/* Top Section - Logo and Points Badge */}
      <div className="flex items-start justify-between">
        {/* Logo */}
        <div
          className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
          style={{
            background: "linear-gradient(135deg, rgba(0, 187, 167, 1) 0%, rgba(0, 122, 85, 1) 100%)"
          }}
        >
          <span className="text-[10px] font-bold text-white leading-[125%] tracking-[-0.11px]">
            {t("points.logo")}
          </span>
        </div>

        {/* Points Badge */}
        <div
          className="rounded-full px-3 py-1 flex items-center justify-center"
          style={{
            background: "#fff5ef",
            border: "1px solid #ffc9ad"
          }}
        >
          <span className="text-[10px] font-bold leading-[150%] tracking-[0.01em]" style={{ color: "#ff6900" }}>
            {pointsLabel}
          </span>
        </div>
      </div>

      {/* Middle Section - Title and Subtitle */}
      <div className="flex flex-col gap-1">
        <h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
          {title}
        </h3>
        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
          {subtitle}
        </p>
      </div>

      {/* Bottom Section - Metric and Button */}
      <div className="flex items-center gap-6">
        {/* Metric */}
        <div className="flex-1 flex flex-col gap-1">
          <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            {metricLabel}
          </span>
          <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
            {metricValue}
          </span>
        </div>

        {/* Button */}
        <BorderedButton
          size="lg"
          onClick={onButtonClick}
          className="bg-[#f3f4f6] dark:bg-gray-700 text-text-primary dark:text-white"
        >
          {buttonText}
        </BorderedButton>
      </div>
    </div>
  );
}