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

type SightingStackProps = {
  sightings: SightingType[];
};
const SightingStack = ({ sightings }: SightingStackProps) => {
  return (
    <Card className="p-4 w-full h-full ">
      <CardHeader title="Live Sightings" />
      <div className="md:h-[65%]">
        {sightings.map((sighting) => (
          <SightingItem key={sighting.ref} sighting={sighting} />
        ))}
      </div>
    </Card>
  );
};

export default SightingStack;