import React from "react";
import {Button, HStack, Image, Stack, Table, Tbody, Td, Text, Thead, Tr,} from "@chakra-ui/react";
import Header from "./Header";

const filterIcon =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/filterIcon.svg?alt=media&token=f5fa5ada-de63-45c4-b3b7-15d598a4b416";
const whiteDropArrow =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/whiteDropArrow.svg?alt=media&token=42732630-3807-49a8-888d-7077a4c9724b";
const Data = [
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
    {
        reward: "Learning to stand",
        booking: "0.0",
        offer: "0.0",
        cpa: "0.0",
        date: "0.0",
        status: "0",
        contact: "0%",
    },
];
const LabsDashboardTable = () => {
    return (
        <Stack w="100%" alignItems={"center"} pb="40px" bg="rgba(247, 248, 252, 1)">
            <Header title="Lab"/>
            <HStack py="32px" justifyContent="space-between" w="1121px">
                <Button
                    w="205px"
                    h="46px"
                    color="white"
                    justifyContent={"space-between"}
                    alignItems={"center"}
                    borderRadius={"8px"}
                    px="24px"
                    bg="#051E61"
                    fontFamily="MaisonBold"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="14px"
                    letterSpacing="0.20000001192092896px"
                    _hover={{bg: "blue.900"}}
                >
                    <Text>Create new Activity</Text>

                    <Image w="12px" h="6px" src={whiteDropArrow}/>
                </Button>
                <Button
                    w="107px"
                    h="46px"
                    color="white"
                    justifyContent={"space-between"}
                    alignItems={"center"}
                    borderRadius={"8px"}
                    px="22px"
                    bg="#051E61"
                    fontFamily="MaisonBold"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="14px"
                    letterSpacing="0.20000001192092896px"
                    _hover={{bg: "blue.900"}}
                >
                    <Image w="18px" h="12px" src={filterIcon}/>
                    <Text>Filter</Text>
                </Button>
            </HStack>
            <Table
                maxW={"1121px"}
                size="sm"
                variant="none"
                border="1px solid "
                bg="white"
                borderColor="rgba(223, 224, 235, 1)"
            >
                <Thead
                    h="44px"
                    borderBottom="1px solid"
                    borderColor="rgba(223, 224, 235, 1)"
                >
                    <Tr>
                        <Td fontSize="12px" className="Masion-Book" color="#9FA2B4">
                            Name
                        </Td>
                        <Td fontSize="12px" className="Masion-Book" color="#9FA2B4">
                            Content Type
                        </Td>
                        <Td
                            fontSize="12px"
                            textAlign="center"
                            className="Masion-Book"
                            color="#9FA2B4"
                        >
                            Content Type
                        </Td>
                        <Td
                            fontSize="12px"
                            textAlign="center"
                            className="Masion-Book"
                            color="#9FA2B4"
                        >
                            Content Type
                        </Td>
                        <Td
                            fontSize="12px"
                            textAlign="center"
                            className="Masion-Book"
                            color="#9FA2B4"
                        >
                            Content Type
                        </Td>
                        <Td
                            fontSize="12px"
                            textAlign="center"
                            className="Masion-Book"
                            color="#9FA2B4"
                        >
                            Content Type
                        </Td>
                        <Td
                            fontSize="12px"
                            textAlign="center"
                            className="Masion-Book"
                            color="#9FA2B4"
                        >
                            Content Type
                        </Td>
                    </Tr>
                </Thead>
                <Tbody>
                    {Data.map((item) => {
                        return (
                            <Tr
                                h="60px"
                                borderBottom="1px solid"
                                borderColor="rgba(223, 224, 235, 1)"
                            >
                                <Td
                                    className="MasionDemi"
                                    textAlign="left"
                                    fontSize="14px"
                                    color="black"
                                >
                                    {item.reward}
                                </Td>
                                <Td>
                                    <Button
                                        className="MasionBold"
                                        pt="3px"
                                        textAlign="center"
                                        letterSpacing="0.5px"
                                        color="white"
                                        borderRadius="6px"
                                        w="83px"
                                        h="29px"
                                        bg="rgba(129, 136, 154, 0.8)"
                                        fontSize="11px"
                                    >
                                        ACTIVITY
                                    </Button>
                                </Td>
                                <Td
                                    className="interFonts"
                                    textAlign="center"
                                    fontWeight="500"
                                    fontSize="13px"
                                    color="black"
                                >
                                    {item.offer}
                                </Td>
                                <Td
                                    className="interFonts"
                                    textAlign="center"
                                    fontWeight="500"
                                    fontSize="13px"
                                    color="black"
                                >
                                    {item.cpa}
                                </Td>
                                <Td
                                    className="interFonts"
                                    textAlign="center"
                                    fontWeight="500"
                                    fontSize="13px"
                                    color="black"
                                >
                                    {item.date}
                                </Td>
                                <Td
                                    className="interFonts"
                                    textAlign="center"
                                    fontWeight="500"
                                    fontSize="13px"
                                    color="black"
                                >
                                    {item.status}
                                </Td>
                                <Td
                                    className="interFonts"
                                    textAlign="center"
                                    fontWeight="500"
                                    fontSize="13px"
                                    color="black"
                                >
                                    {item.contact}
                                </Td>
                            </Tr>
                        );
                    })}
                </Tbody>
            </Table>
        </Stack>
    );
};

export default LabsDashboardTable;