"use server"

import AlertTable from "@/app/ui/table/alertTable";
import { fetchUrgentAlerts } from "@/app/lib/data";
import { AlertWithMatch } from "@/app/lib/definitions";
import { Container } from "@chakra-ui/react";




export default async function UnreadAlert() {

    const alerts: AlertWithMatch[] = await fetchUrgentAlerts();


    return (
        <Container maxW="100%" mx={0} w={"100%"} mt={8} borderWidth={4} borderColor={"background.100"} p={8} borderRadius={8}>
                <AlertTable title={"Unread alerts"}
                                captions={["Author", "Title", "Content", "Date"]}
                                data={alerts}/>  
        </Container>
    );
    }

"use client"

// Chakra imports
import {
  Flex,
  Table,
  Tbody,
  Text,
  Th,
  Thead,
  Tr,
  useColorModeValue,
} from "@chakra-ui/react";
// Custom components
import Card from "../purify/components/Card/Card";
import CardBody from "../purify/components/Card/CardBody";
import CardHeader from "../purify/components/Card/CardHeader";
// Types

import React from "react";
import AlertTableRow from "./TablesAlertRow";
import { AlertWithMatch } from "@/app/lib/definitions";

const AlertTable = ({ title, captions, data } : { title: string, captions: string[], data: AlertWithMatch[] }) => {
  const textColor = useColorModeValue("gray.700", "white");
  return (
    <Card  overflowX={{ sm: "scroll", xl: "hidden" }}>
      <CardHeader p='0px 0px 22px 0px'>
        <Flex direction='column'>
          <Text fontSize='lg' color={textColor} fontWeight='bold' pb='.5rem'>
            {title}
          </Text>
        </Flex>
      </CardHeader>
      <CardBody>
        <Table variant='simple' color={textColor}>
          <Thead>
            <Tr my='.8rem' pl='0px'>
              {captions.map((caption, idx) => {
                return (
                  <Th color='gray.400' key={idx} ps={idx === 0 ? "0px" : undefined}>
                    {caption}
                  </Th>
                );
              })}
            </Tr>
          </Thead>
          <Tbody>
            {data.map((alert) => {
              return (
                <AlertTableRow
                  key={alert.id}
                  alert={alert}
                    
                />
              );
            })}
          </Tbody>
        </Table>
      </CardBody>
    </Card>
  );
};

export default AlertTable;