tremor-tracker/src/app/shop/page.tsx

"use client";
import Image from 'next/image';
import { Dispatch, SetStateAction, useCallback, useState } from 'react';

import Artifact from '@appTypes/Artifact';
import { Currency } from '@appTypes/StoreModel';
import { useStoreState } from '@hooks/store';

// Artifacts Data
const artifacts: Artifact[] = [
	{
		id: 1,
		name: "Golden Scarab",
		description: "An ancient Egyptian artifact symbolizing rebirth.",
		location: "Cairo, Egypt",
		image: "/artifact1.jpg",
		price: 150,
	},
	{
		id: 2,
		name: "Aztec Sunstone",
		description: "A replica of the Aztec calendar (inscriptions intact).",
		location: "Peru",
		image: "/artifact2.jpg",
		price: 200,
	},
	{
		id: 3,
		name: "Medieval Chalice",
		description: "Used by royalty in medieval ceremonies.",
		location: "Cambridge, England",
		image: "/artifact3.jpg",
		price: 120,
	},
	{
		id: 4,
		name: "Roman Coin",
		description: "An authentic Roman coin from the 2nd century CE.",
		location: "Rome, Italy",
		image: "/artifact4.jpg",
		price: 80,
	},
	{
		id: 5,
		name: "Samurai Mask",
		description: "Replica of Japanese Samurai battle masks.",
		location: "Tokyo, Japan",
		image: "/artifact5.jpg",
		price: 300,
	},
	{
		id: 6,
		name: "Ancient Greek Vase",
		description: "Depicts Greek mythology, found in the Acropolis.",
		location: "Athens, Greece",
		image: "/artifact6.jpg",
		price: 250,
	},
	{
		id: 7,
		name: "Incan Pendant",
		description: "Represents the Sun God Inti.",
		location: "India",
		image: "/artifact7.jpg",
		price: 175,
	},
	{
		id: 8,
		name: "Persian Carpet Fragment",
		description: "Ancient Persian artistry.",
		location: "Petra, Jordan",
		image: "/artifact8.jpg",
		price: 400,
	},
	{
		id: 9,
		name: "Stone Buddha",
		description: "Authentic stone Buddha carving.",
		location: "India",
		image: "/artifact9.jpg",
		price: 220,
	},
	{
		id: 10,
		name: "Victorian Brooch",
		description: "A beautiful Victorian-era brooch with a ruby centre.",
		location: "Oxford, England",
		image: "/artifact10.jpg",
		price: 150,
	},
	{
		id: 11,
		name: "Ancient Scroll",
		description: "A mysterious scroll from ancient times.",
		location: "Madrid, Spain",
		image: "/artifact11.jpg",
		price: 500,
	},
	{
		id: 12,
		name: "Ming Dynasty Porcelain",
		description: "Porcelain from China's Ming Dynasty.",
		location: "Beijing, China",
		image: "/artifact12.jpg",
		price: 300,
	},
	{
		id: 13,
		name: "African Tribal Mask",
		description: "A unique tribal mask from Africa.",
		location: "Nigeria",
		image: "/artifact13.jpg",
		price: 250,
	},
	{
		id: 14,
		name: "Crystal Skull",
		description: "A mystical pre-Columbian artifact.",
		location: "Colombia",
		image: "/artifact14.jpg",
		price: 1000,
	},
	{
		id: 15,
		name: "Medieval Armor Fragment",
		description: "A fragment of medieval armor.",
		location: "Normandy, France",
		image: "/artifact15.jpg",
		price: 400,
	},
    {
		id: 16,
		name: "Medieval Helmet Fragment",
		description: "A fragment of a medieval helmet.",
		location: "Normandy, France",
		image: "/artifact16.jpg",
		price: 500,
	},
];

export default function Shop() {
  const [currentPage, setCurrentPage] = useState(1);
  const [selectedArtifact, setSelectedArtifact] = useState<Artifact | null>(null);
  const artifactsPerPage = 12;
  const indexOfLastArtifact = currentPage * artifactsPerPage;
  const indexOfFirstArtifact = indexOfLastArtifact - artifactsPerPage;
  const currentArtifacts = artifacts.slice(indexOfFirstArtifact, indexOfLastArtifact);

  const selectedCurrency = useStoreState((state) => state.currency.selectedCurrency);
  const conversionRates = useStoreState((state) => state.currency.conversionRates);
  const currencyTickers = useStoreState((state) => state.currency.tickers);

  const convertPrice = useCallback(
    (price: number, currency: Currency) => (price * conversionRates[currency]).toFixed(2), 
    []
  );

  const handleNextPage = () => {
    if (indexOfLastArtifact < artifacts.length) {
      setCurrentPage((prev) => prev + 1);
    }
  };
  const handlePreviousPage = () => {
    if (currentPage > 1) {
      setCurrentPage((prev) => prev - 1);
    }
  };

  function Modal({ artifact }: { artifact: Artifact }) {
    if (!artifact) return null;
    const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
      if (e.target === e.currentTarget) {
        setSelectedArtifact(null);
      }
    };
    return (
      <div
        className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
        onClick={handleOverlayClick}
      >
        <div className="bg-white rounded-xl shadow-2xl max-w-lg w-full p-6">
          <h3 className="text-2xl font-bold mb-4">{artifact.name}</h3>
          <Image
            height={5000}
            width={5000}
            src={artifact.image}
            alt={artifact.name}
            className="w-full h-64 object-cover rounded-md"
          />
          <p className="text-xl font-bold">
            {currencyTickers[selectedCurrency]}
            {convertPrice(artifact.price, selectedCurrency)}
          </p>
          <p className="text-neutral-600 mt-2">{artifact.description}</p>
          <p className="text-neutral-500 font-bold mt-1">Location: {artifact.location}</p>
          <div className="flex justify-end gap-4 mt-4 mr-2">
            <button
              onClick={() => alert("Purchased Successfully!")}
              className="px-10 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
            >
              Buy
            </button>
          </div>
        </div>
      </div>
    );
  }

  function ArtifactCard({ artifact }: { artifact: Artifact }) {
    return (
      <div
        className="flex flex-col bg-white shadow-md rounded-md overflow-hidden cursor-pointer hover:scale-105 transition-transform"
        onClick={() => setSelectedArtifact(artifact)}
      >
        <img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" />
        <div className="p-4">
          <h3 className="text-lg font-semibold">{artifact.name}</h3>
          <p className="text-neutral-500 mb-2">{artifact.location}</p>
          <p className="text-black font-bold text-md mt-2">
            {currencyTickers[selectedCurrency]}
            {convertPrice(artifact.price, selectedCurrency)}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div 
      className="min-h-screen relative flex flex-col"
      style={{
        backgroundImage: "url('/artifacts.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center'
      }}
    >
      {/* Overlay */}
      <div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
      <div className="relative z-10 flex flex-col items-center w-full px-2 py-12">
        {/* Title & Subheading */}
        <h1 className="text-4xl md:text-4xl font-bold text-center text-white mb-2 tracking-tight drop-shadow-lg">
          Artifact Shop
        </h1>
        <p className="text-lg md:text-xl text-center text-white mb-10 drop-shadow-md max-w-2xl">
          Discover extraordinary historical artifacts and collectibles from major seismic events from around the world - now available for purchase.
        </p>

        {/* Artifact Grid */}
        <div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 p-2"> {/* gap-10 for more spacing */}
          {currentArtifacts.map((artifact) => (
            <ArtifactCard key={artifact.id} artifact={artifact} />
          ))}
        </div>

        {/* Pagination Footer */}
        <footer className="mt-10 bg-white bg-opacity-90 border-neutral-300 py-3 text-center flex justify-center items-center w-100 max-w-7xl rounded-lg">
          <button
            onClick={handlePreviousPage}
            disabled={currentPage === 1}
            className={`mx-2 px-4 py-1 bg-blue-500 text-white rounded-md font-bold shadow-md ${
              currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
            }`}
          >
            &larr; Previous
          </button>
          <p className="mx-3 text-lg font-bold">{currentPage}</p>
          <button
            onClick={handleNextPage}
            disabled={indexOfLastArtifact >= artifacts.length}
            className={`mx-2 px-4 py-1 bg-blue-500 text-white rounded-md font-bold shadow-md ${
              indexOfLastArtifact >= artifacts.length ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
            }`}
          >
            Next &rarr;
          </button>
        </footer>
      </div>

      {/* Modal */}
      {selectedArtifact && <Modal artifact={selectedArtifact} />}
    </div>
  );
}