"use client";

import type { DailyMood } from "@/features/mood/types";
import { moodDict } from "@/features/mood/dict";
import { formatMoodRatingLabel } from "@/features/mood/utils/mood-helpers";

type DailyMoodBannerProps = {
  entry: DailyMood | null | undefined;
  isLoading?: boolean;
  onClick: () => void;
};

function MoodIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-5 text-primary-foreground"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <circle cx="12" cy="12" r="9" />
      <path d="M8 14s1.5 2 4 2 4-2 4-2" />
      <circle cx="9" cy="10" r="0.75" fill="currentColor" stroke="none" />
      <circle cx="15" cy="10" r="0.75" fill="currentColor" stroke="none" />
    </svg>
  );
}

export function DailyMoodBanner({
  entry,
  isLoading = false,
  onClick,
}: DailyMoodBannerProps) {
  const hasEntry = Boolean(entry);

  return (
    <button
      type="button"
      onClick={onClick}
      disabled={isLoading}
      className="mb-4 flex w-full items-center gap-3 rounded-2xl bg-card p-3 text-start shadow-soft-sm transition-transform hover:scale-[1.01] active:scale-[0.99] disabled:opacity-70 sm:gap-4 sm:p-3.5"
    >
      <div className="inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-[#2EC4B6] to-primary shadow-soft-sm sm:size-11">
        <MoodIcon />
      </div>

      <div className="min-w-0 flex-1 space-y-0.5">
        <p className="text-sm font-semibold text-card-foreground">
          {hasEntry ? moodDict.bannerLoggedTitle : moodDict.bannerTitle}
        </p>
        <p className="text-xs text-muted-foreground sm:text-sm">
          {isLoading
            ? "..."
            : hasEntry
              ? formatMoodRatingLabel(entry!.dayRating)
              : moodDict.bannerSubtitle}
        </p>
      </div>

      <svg
        aria-hidden="true"
        className="size-5 shrink-0 text-muted-foreground"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        strokeWidth={2}
      >
        <path d="M15 6l-6 6 6 6" />
      </svg>
    </button>
  );
}