"use client";

import Link from "next/link";
import React from "react";

const ZodiacBasedSignClient = ({ zodiacSigns }) => {
  return (
    <div className="container mx-auto px-4">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
        {zodiacSigns.map((sign) => (
          <div
            key={sign.name}
            className="border border-[#AC8C6B]  overflow-hidden"
          >
            <div className="p-4 flex sm:flex-row flex-col sm:gap-0 gap-3">
              <div className="sm:w-1/3 flex items-center justify-center">
                <h2 className="sm:text-2xl uppercase font-serif  text-yellow-800">
                  {sign.name}
                </h2>
              </div>
              <div className="sm:w-2/3 grid grid-cols-2 gap-2">
                <MiniCard
                  price={sign.rudraksha.price}
                  type={sign.rudraksha.type}
                  mukhi={sign.rudraksha.mukhi}
                  name="Rudraksha"
                />
                <MiniCard
                  price={sign.gaurishankar.price}
                  type={sign.gaurishankar.type}
                  mukhi={sign.gaurishankar.mukhi}
                  name="Gauri Shankar"
                />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const MiniCard = ({ price, type, mukhi, name }) => (
  <div className="bg-pink-100 p-2 rounded">
    <Link href={`/products/${mukhi}-mukhi-${name}`}>
      {price !== null ? (
        <p className="text-sm sm:text-[17px] my-2 w-1/2 font-medium text-zinc-700">
          ${price.toFixed(2)} | {type}
        </p>
      ) : (
        <p className="text-sm font-medium text-zinc-700">
          Price not available | {type}
        </p>
      )}
    </Link>
    <Link href={`/products/${mukhi}-mukhi-${name}`}>
      {mukhi !== null ? (
        <p className="text-sm sm:text-[17px] w-1/2 text-zinc-600">
          {mukhi} Mukhi {name}
        </p>
      ) : (
        <p className="text-sm sm:text-[17px] my-2 w-1/2 text-zinc-600">
          Mukhi not specified | {name}
        </p>
      )}
    </Link>
  </div>
);

export default ZodiacBasedSignClient;