import { Card, Space, Image, Button } from "antd";

/**
 * A card component displaying nominee information.
 * @param {Object} props - The component's props.
 * @param {Object} props.dat - Nominee data to display.
 * @param {function} props.setShowCurrent - A function to set the current view.
 * @param {function} props.setDocumentToView - A function to set the document to view.
 * @returns {JSX.Element} The rendered component.
 */
const NomineeCard = ({ dat, setShowCurrent, setDocumentToView }) => {
const handleDocumentClick = () => {
    setDocumentToView(dat);
    setShowCurrent("View Document");
  };
  return (
    <Space direction="vertical" size={16} style={{ marginTop: "20px" }}>
      <Card>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between", // Align items to the left and right
            alignItems: "flex-start", // Align items to the top
            width: 800,
          }}
        >
          <div style={{ flex: 1 }}>
            <div className="shareholder_info">
            <h3>
              Name : </h3>
             <h6> {dat?.first_name} {" "}
              {dat?.last_name}</h6>
            </div>
            {/* {dat?.middle_name && dat?.dat.middle_name} */}

          <div className="shareholder_info">
             <h3>
              Relationship : </h3>
             <h6> {dat?.relationship}</h6>
          </div>
           
           <div className="shareholder_info">
              {dat?.phone_number && (
                  <h3>
                    <b>Phone : </b>
                    {dat?.phone_number}
                  </h3>
                )} 
           </div>
           <div className="shareholder_info">
                {dat?.district?.name && (
                    <h3>
                      <b>District : </b>
                      {dat?.district?.name}
                    </h3>
                  )}
           </div>

          </div>
          {dat?.document_file && <div className="thumbnail" onClick={handleDocumentClick}>
            {dat?.document_file?.split(".").pop() === "pdf" ? (
              <img src="/pdf_logo.jpg" alt="PDF icon" />
            ) : (
              <img
                style={{ objectFit: "contain" }}
                src={dat?.document_file}
                alt="Family Member Image"
              />
            )}
          </div>}
        </div>
      </Card>
    </Space>
  );
};
export default NomineeCard;