import React from "react";
import styles from "@/styles/contact.module.scss";
import { AiOutlineSortAscendings,AiOutlineEllipsis} from "react-icons/ai";

import DataTable from "react-data-table-component";

export default function contact(){
    const columns = [
        
            
        {
            name: "",
            selector: (row) => (
              <img
                src="./coworking-spaces-02.jpg"
                height="60px"
                width="60px"
                style={{
                  border: "5px solid #ECEBEC",
                  borderRadius: "7px",
                  objectFit: "fill",
                }}></img>
            ),
            sortable: true,
        },
        {
            name: (
                <>
                  < AiOutlineSortAscendings/>{" "}
                  <span style={{ paddingLeft: "7px" }}>Name</span>{" "}
                </>
              ),
              selector: (row) => (
                <div>
                  <div style={{ color: "#3F4254", fontWeight: 600 }}>{row.title}</div>
                  <div style={{ color: "#626679" }}>{row.address}</div>
                </div>
              ),
              sortable: true,
        },
        {
            name: (
                <>
                  < AiOutlineSortAscendings/>{" "}
                  <span style={{ paddingLeft: "7px" }}>Email</span>
                </>
              ),
              selector: (row) => (
                <div style={{ color: "#626679" }}>
                  <div>{row.EamilId}</div>
                  <div>Eamil</div>
                </div>
              ),
              sortable: true,
        },
        {
            name: (
                <>
                  <AiOutlineSortAscendings/>{" "}
                  <span style={{ paddingLeft: "7px"}}>Phone</span>
                </>
              ),
              selector: (row) => (
                <div>
                  <div style={{ fontWeight: "700" }}>
                  561-303-6106
                  </div>
                  <div>Price</div>
                </div>
              ),
        },
        {
            name: (
                <>
                  <AiOutlineSortAscendings/>{" "}
                  <span style={{ paddingLeft: "7px"}}>Fee</span>
                </>
              ),
              selector: (row) => (
                <div>
                  <div style={{ color: "#459ED8", fontWeight: "700" }}>
                    ${row.price}/hr
                  </div>
                  <div>Rate</div>
                </div>
              ),
        },
        {
            name: (
                <>
                  <AiOutlineSortAscendings/>{" "}
                  <span style={{ paddingLeft: "7px"}}>Tag</span>
                </>
              ),
              selector: (row) => (
                <div>
                    <div><button className={styles.tag_button}></button></div>
                </div>
              ),
        },
        {
            name: "",
            selector: (row) => <AiOutlineEllipsis fontSize={30} />,
              
        }
      
    ];

    const data = [
        {
            id: 1,
            title: "Nichole Perkins",
            address: "Company",
            EamilId: "nichole@gmail.com",
            price: "17",
        },
        {
            id: 1,
            title: "Anastasya Gordon",
            address: "Company",
            EamilId: "gordon@gmail.com",
            price: "17",
        },
        {
            id: 1,
            title: "Thomas Holand",
            address: "Company",
            EamilId: "thomas@gmail.com",
            price: "17",
        },
        {
            id: 1,
            title: "Larry Nichole",
            address: "Company",
            EamilId: "larry@gmail.com",
            price: "17",
        },
        {
            id: 1,
            title: "Nichole Perkins",
            address: "Company",
            EamilId: "nichole@gmail.com",
            price: "17",
        },
        {
            title: "Nichole Perkins",
            address: "Company",
            EamilId: "gordon@gmail.com",
            price: "17",
        },
        {
            title: "Thomas Holand",
            address: "Company",
            EamilId: "thomas@gmail.com",
            price: "17",
        },
        
    ];
    const customStyles = {
        headCells: {
          style: {
            fontSize: "16px",
            color: "#626679",
            border: "none !important",
          },
        },
        rows: {
          style: {
            border: "none !important",
          },
        },
      };

    return(
        <>
            <div>
            <DataTable
              columns={columns}
              data={data}
              //pagination
              customStyles={customStyles}
            />
            </div>
        </>
    );
}