import { Avatar } from "../../../atoms";

type ExperienceCardProps = {
  title: string;
  image: string;
  place?: string;
  from?: Date;
  to?: Date;
  text?: string;
};

const ExperienceCard = ({
  title,
  place,
  image,
  text,
  from,
  to,
}: ExperienceCardProps) => {
  return (
    <div className="flex p-3 gap-6 rounded-2xl bg-mono-50">
      <div>
        <Avatar
          image={image}
          className="w-16 h-16"
          imageAvatarClassName="rounded-lg"
        />
      </div>
      <div>
        <div className="text-gray-900 font-semibold pb-3">{title}</div>
        <div className="text-sm font-medium">
          <div className="text-mono-500 pb-3">
            {place}
            <br />
            {(from && to) && <>
              {from?.getFullYear()} - {to?.getFullYear()}
            </>}
          </div>
          <div className="text-mono-600">{text}</div>
        </div>
      </div>
    </div>
  );
};

export { ExperienceCard, ExperienceCardProps };
