import { useAlertHitContext } from "../../context/AlertHitContext";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import AlertItem from "./AlertItem";

const HistoryList = () => {
  const { state } = useAlertHitContext();
  console.log(state);
  return (
    <Card className="h-100">
      <CardHeader title="Alert History" />
      <div className="flex flex-col gap-1">
        {state?.alertList?.length >= 0 ? (
          state?.alertList?.map((alertItem, index) => (
            <AlertItem key={index} item={alertItem} />
          ))
        ) : (
          <p>No Search results</p>
        )}
      </div>
    </Card>
  );
};

export default HistoryList;