import { Card, List } from "flowbite-react";
import { FC } from "react";
import { TSstaffSchema } from "../forms/schema/staff";

type props = {
  staff: TSstaffSchema;
};

const StaffView: FC<props> = ({ staff }) => {
  return (
    <>
      <div className="p-">
        <Card className="rounded-none">
          <div className="grid grid-cols-1 gap-0 p-2 relative md:grid-cols-2 lg:grid-cols-2 mb-5">
            <div>
              <List className="list-none">
                <List.Item>
                  <h2 className="font-bold text-xl text-gray-800">
                    Basic Information
                  </h2>
                  <List ordered nested className="list-none p-0">
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Client Id
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.staffId}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Client Name
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Phone Number
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.phone}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Email
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.email}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Date Of Birth
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.date_of_birth}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Network
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.join_date}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Present Address
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.present_address}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Permanent Address
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.permanent_address}</span>
                    </List.Item>
                  </List>
                </List.Item>
              </List>
            </div>
            <div>
              <List className="list-none">
                <List.Item>
                  <h2 className="font-bold text-xl text-gray-800">&nbsp;</h2>
                  <List ordered nested className="list-none p-0">
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Father's Name
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.father_name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Mother's Name
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.mother_name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        NID
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.nid}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Marital Status
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.marital_status}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Gender
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.gender}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Status
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.status}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Job Experience
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.job_experience}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Social Media Address
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{staff?.social_media_address}</span>
                    </List.Item>
                  </List>
                </List.Item>
              </List>
            </div>
          </div>
        </Card>
      </div>
    </>
  );
};

export default StaffView;