my-portfolio/src/sections/WorkExperience.tsx

"use client";

import type { WorkExperience as WorkExperienceType } from "../types";

interface WorkExperienceProps {
  experiences: WorkExperienceType[];
}

function formatMonth(iso: string) {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  return d.toLocaleDateString("en-US", { year: "numeric", month: "short", timeZone: "UTC" });
}

/** "X yr Y mo" duration between two dates (toDate null = now). */
function formatDuration(fromIso: string, toIso?: string | null) {
  const from = new Date(fromIso);
  const to = toIso ? new Date(toIso) : new Date();
  if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime())) return "";

  let months =
    (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth());
  if (to.getDate() >= from.getDate()) months += 1; // count the current/partial month
  months = Math.max(months, 1);

  const years = Math.floor(months / 12);
  const rem = months % 12;
  const parts: string[] = [];
  if (years > 0) parts.push(`${years} yr`);
  if (rem > 0) parts.push(`${rem} mo`);
  return parts.join(" ");
}

export function WorkExperience({ experiences }: WorkExperienceProps) {
  return (
    <section className="w-full max-w-4xl mx-auto px-4 space-y-6 sm:space-y-8">
      <div className="text-center space-y-2">
        <h2 className="text-2xl font-semibold text-white sm:text-3xl">Work Experience</h2>
        <p className="mx-auto max-w-2xl text-sm text-gray-500 sm:text-base">
          Actual work that i did at actual companies.
        </p>
      </div>

      {experiences.length === 0 ? (
        <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-5 text-center sm:p-6 md:p-8">
          <p className="text-gray-400">No work experience entries available yet.</p>
        </div>
      ) : (
        <div className="space-y-4">
          {experiences.map((entry) => (
            <div
              key={entry.id}
              className="w-full space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-colors hover:border-white/20 sm:space-y-5 sm:p-6 md:p-8"
            >
              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-2">
                <div className="flex items-start gap-3">
                  {entry.iconUrl ? (
                    <img
                      src={entry.iconUrl}
                      alt=""
                      className="mt-1 h-10 w-10 shrink-0 rounded-lg object-contain"
                    />
                  ) : null}
                  <div>
                    <h3 className="text-xl font-semibold text-white sm:text-2xl">
                      {entry.company}
                    </h3>
                    <p className="mt-1 text-sm font-medium text-gray-300">{entry.role}</p>
                    <p className="mt-1 text-xs font-medium uppercase tracking-wide text-gray-500">
                      {formatMonth(entry.fromDate)} —{" "}
                      {entry.toDate ? formatMonth(entry.toDate) : "Present"}
                      <span className="ml-2 text-gray-600">
                        · {formatDuration(entry.fromDate, entry.toDate)}
                      </span>
                    </p>
                  </div>
                </div>
                {entry.url ? (
                  <a
                    href={entry.url}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-2 self-start rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm font-medium text-gray-300 transition-colors hover:border-white/25 hover:bg-white/10 sm:self-auto"
                  >
                    <span>{new URL(entry.url).hostname.replace(/^www\./, "")}</span>
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden className="h-4 w-4">
                      <path d="M5 6.75A1.75 1.75 0 0 1 6.75 5h2a.75.75 0 0 0 0-1.5h-2A3.25 3.25 0 0 0 3.5 6.75v6.5A3.25 3.25 0 0 0 6.75 16.5h6.5a3.25 3.25 0 0 0 3.25-3.25v-2a.75.75 0 0 0-1.5 0v2A1.75 1.75 0 0 1 13.25 15h-6.5A1.75 1.75 0 0 1 5 13.25v-6.5Z" />
                      <path d="M11.25 3.5a.75.75 0 0 0 0 1.5h2.69l-4.72 4.72a.75.75 0 1 0 1.06 1.06L15 6.06v2.69a.75.75 0 0 0 1.5 0V3.5h-5.25Z" />
                    </svg>
                  </a>
                ) : null}
              </div>

              <p className="leading-relaxed text-gray-300">{entry.summary}</p>

              {entry.tags.length > 0 ? (
                <div className="flex flex-wrap gap-2">
                  {entry.tags.map((tag) => (
                    <span
                      key={`${entry.id}-${tag}`}
                      className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-gray-300"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              ) : null}
            </div>
          ))}
        </div>
      )}
    </section>
  );
}