import { algora, type AlgoraOutput } from "@algora/sdk";

const useBounties = () => {
  const [bounties, setBounties] = useState<RemoteData<Bounty[]>>({ _tag: "loading" });

  useEffect(() => {
    algora.bounty.list
      .query({ org: "acme", limit: 3, status: "active" })
      .then(({ items: data }) => setBounties({ _tag: "success", data }))
      .catch((error) => setBounties({ _tag: "failure", error }));
  }, []);

  return bounties;
};

export function Bounties() {
  const bounties = useBounties();

  return (
    <div className="space-y-2">
      <ul className="grid gap-2 sm:grid-cols-3">
        {bounties._tag === "success" &&
          bounties.data.map((bounty) => (
            <li key={bounty.id}>
              <Link
                href={props.bounty.task.url}
                target="_blank"
                rel="noopener"
                className="group relative block h-full rounded-lg border border-gray-400/50 bg-gradient-to-br from-gray-300/30 via-gray-300/40 to-gray-300/50 !no-underline transition-colors hover:border-gray-400 hover:bg-gray-300/10 dark:border-indigo-500/50 dark:from-indigo-600/20 dark:via-indigo-600/30 dark:to-indigo-600/40 hover:dark:border-indigo-500 hover:dark:bg-gray-600/5 md:gap-8"
              >
                <div className="relative h-full p-4">
                  <div className="text-2xl font-bold text-green-500 transition-colors group-hover:text-green-600 dark:text-green-400 dark:group-hover:text-green-300">
                    {props.bounty.reward_formatted}
                  </div>
                  <div className="mt-0.5 text-sm text-gray-700 transition-colors group-hover:text-gray-800 dark:text-indigo-200 dark:group-hover:text-indigo-100">
                    {props.bounty.task.repo_name}#{props.bounty.task.number}
                  </div>
                  <div className="mt-3 line-clamp-1 break-words text-lg font-medium leading-tight text-gray-800 group-hover:text-gray-900 dark:text-indigo-50 dark:group-hover:text-white">
                    {props.bounty.task.title}
                  </div>
                </div>
              </Link>
            </li>
          ))}
      </ul>
    </div>
  );
};