import { useState } from "react";
import CardHeader from "../../../../components/CardHeader";
import Card from "../../../../components/ui/Card";
import type { SightingType } from "../../../../utils/types";
import SightingItem from "./SightingItem";
import SightingItemModal from "./sightingItemModal/SightingItemModal";

type SightingStackProps = {
  sightings: SightingType[];
};
const SightingStack = ({ sightings }: SightingStackProps) => {
  const [isSightingModalOpen, setIsSightingModalOpen] = useState(false);
  const [currentSighting, setCurrentSighting] = useState<SightingType | null>(null);
  const handleOpenModal = (sighting: SightingType | null) => {
    if (!sighting) return;
    setCurrentSighting(sighting);
    setIsSightingModalOpen(true);
  };

  return (
    <>
      <Card className="p-4 w-full h-[65vh] overflow-y-auto">
        <CardHeader title="Live Sightings" />
        <div className="md:h-[65%]">
          {sightings.map((sighting) => (
            <SightingItem key={sighting.ref} sighting={sighting} onOpenModal={() => handleOpenModal(sighting)} />
          ))}
        </div>
      </Card>
      <SightingItemModal
        isOpen={isSightingModalOpen}
        close={() => setIsSightingModalOpen(false)}
        sighting={currentSighting}
      />
    </>
  );
};

export default SightingStack;