// LeadCard.jsx
import { useState } from 'react';

const LeadCard = ({ lead }) => {
  const [isExpanded, setIsExpanded] = useState(true);
  // const [copiedEmail, setCopiedEmail] = useState(false);

  // const copyToClipboard = (text) => {
  //   navigator.clipboard.writeText(text);
  //   setCopiedEmail(true);
  //   setTimeout(() => setCopiedEmail(false), 2000);
  // };

  const toggleExpanded = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="card border mb-3">
      <div className="card-header bg-white border-bottom">
        <div className="d-flex justify-content-between align-items-center">
          <div
            className="d-flex align-items-center gap-2"
            onClick={toggleExpanded}
            style={{ cursor: 'pointer', color: 'blue' }}
          >
            {isExpanded ? (
              <i className="bi bi-chevron-down"></i>
            ) : (
              <i className="bi bi-chevron-compact-up"></i>
            )}
            <h6 className="mb-0 fw-semibold text-dark">About this lead</h6>
          </div>
          <button className="btn">
            <i className="bi bi-pencil-square" style={{ color: 'blue' }}></i>
          </button>
        </div>
      </div>

      {isExpanded && (
        <div className="card-body">
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">Email</label>
            <div className="d-flex align-items-center gap-2">
              <p className="mb-0 text-dark">{lead.email}</p>
              {/* <button
                className="btn btn-sm p-0 border-0 bg-transparent"
                onClick={() => copyToClipboard(lead.email)}
                title={copiedEmail ? "Copied!" : "Copy email to clipboard"}
                style={{ color: copiedEmail ? "#22c55e" : "#6366f1" }}
              >
                {copiedEmail ? (
                  <Check size={14} />
                ) : (
                  <Copy size={14} />
                )}
              </button> */}
            </div>
          </div>
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">First Name</label>
            <p className="mb-0 text-dark">{lead.firstName}</p>
          </div>
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">Last Name</label>
            <p className="mb-0 text-dark">{lead.lastName}</p>
          </div>
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">Phone number</label>
            <p className="mb-0 text-dark">{lead.phone}</p>
          </div>
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">Lead Status</label>
            <p className="mb-0 text-dark">{lead.status}</p>
          </div>
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">Job Title</label>
            <p className="mb-0 text-dark">{lead.jobTitle}</p>
          </div>
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">Company</label>
            <p className="mb-0 text-dark">{lead.company}</p>
          </div>
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">Lead Source</label>
            <p className="mb-0 text-dark">{lead.source}</p>
          </div>
          <div className="mb-3">
            <label className="small text-muted d-block mb-1">Owner</label>
            <p className="mb-0 text-dark">{lead.owner}</p>
          </div>
          <div className="mb-0">
            <label className="small text-muted d-block mb-1">Created Date</label>
            <p className="mb-0 text-dark">{lead.createdDate}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default LeadCard;

remove the commented-out code, if it's not planned for future use
iiam not laned in future