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 md:h-[65%]">
      <CardHeader title="Sightings" />
      {sightings.map((sighting) => (
        <SightingItem key={sighting.ref} sighting={sighting} />
      ))}
    </Card>
  );
};

export default SightingStack;