import { ProfileSectionHeader } from "../../molecules/ProfileSectionHeader";
import { Avatar } from "../../atoms";
export interface ProfileHeaderInfoProps {
  title: string;
  gender?: string;
  pronouns?: string;
  subtitle?: string;
  area?: string;
  connectionsCount?: number;
  experiences?: {
    companyLogo: string;
    designation: string;
    companyName: string;
  }[];
  showEditButton?: boolean;
  onClickContactInfo?: (v?: any) => void
}

const ProfileHeaderInfo = ({
  title,
  gender, pronouns,
  subtitle,
  area: subtext2,
  connectionsCount,
  experiences,
  showEditButton,
  onClickContactInfo,
}: ProfileHeaderInfoProps) => {
  return (
    <ProfileSectionHeader showEditButton={showEditButton}>
      <div className="flex flex-col items-start md:flex-row flex-wrap">
        <div className="pr-6 flex-1 flex flex-col gap-2 items-start">
          <div className="flex items-end gap-2 flex-1">
            <h2 className="text-3xl font-semibold text-gray-900 sm:line-clamp-1">
              {title}
            </h2>
            <p className="text-lg font-medium text-mono-500">
              ({pronouns})
            </p>
          </div>
          <div className="text-base font-semibold text-mono-700 self-stretch">
            {subtitle}
          </div>
          <div className="flex items-center self-stretch gap-1">
            <p className="text-sm font-medium text-mono-500">{subtext2}</p>
            <p className="text-10 text-mono-300 font-normal">•</p>
            {onClickContactInfo && (
              <p className="text-sm font-medium text-teal-600">Contact info</p>
            )}
          </div>
          {connectionsCount && (
            <div className="text-sm font-semibold text-teal-600">
              {connectionsCount} connection{connectionsCount !== 1 ? "s" : ""}
            </div>
          )}
        </div>
        <div className="md:px-9 flex flex-col items-start self-stretch justify-center gap-6">
          {experiences?.map((experience, index) => (
            <div className="flex items-center gap-6 self-stretch" key={index}>
              <Avatar size="lg" image={experience?.companyLogo} name={experience?.companyName}/>
              <div className="flex flex-col items-start">
                <p className="text-base font-medium text-gray-900">
                  {experience?.designation}
                </p>
                <p className="text-sm font-medium text-mono-600">
                  {experience?.companyName}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </ProfileSectionHeader>
  );
};

export { ProfileHeaderInfo };
