"use client";

import Link from "@/app/components/LocaleLink";
import ZodiacImage from "./ZodiacImage";

interface Props {
  zodiac: any;
  type: string;
  imagesLoaded?: boolean;
}

// Picker-only card — icon/name/date, no per-sign horoscope preview.
// Fetching a horoscope for all 12 signs just to show a truncated
// snippet was real, unnecessary API load; the single-sign detail page
// is where the real prediction actually gets fetched and shown.
export default function HoroscopeCard({
  zodiac,
  type,
  imagesLoaded,
}: Props) {
  return (
    <Link
      href={`/horoscope/${type}/${zodiac.slug}`}
      className="horoscope-card horoscope-pick-card"
    >
      <span className="card-zodiac">
        <ZodiacImage
          svgImage={zodiac.svgImage}
          symbol={zodiac.symbol}
          name={zodiac.name}
          loading={!imagesLoaded}
        />
      </span>

      <h3>{zodiac.name}</h3>

      <small>
        {zodiac.date}
      </small>
    </Link>
  );
}