import type { PortalSampleRow } from "../lib/types";

function formatDate(value: string | null) {
  if (!value) {
    return "-";
  }
  return new Intl.DateTimeFormat("de-DE", {
    dateStyle: "medium",
    timeStyle: "short",
  }).format(new Date(value));
}

type SampleSearchResultsSectionProps = {
  eyebrow: string;
  title: string;
  emptyText: string;
  samples: PortalSampleRow[];
  onOpen: (sampleNumber: number) => void;
};

export default function SampleSearchResultsSection({
  eyebrow,
  title,
  emptyText,
  samples,
  onOpen,
}: SampleSearchResultsSectionProps) {
  return (
    <section className="section-card">
      <div className="section-card__header">
        <div>
          <p className="eyebrow">{eyebrow}</p>
          <h3>{title}</h3>
        </div>
      </div>

      {!samples.length ? (
        <div className="empty-state">{emptyText}</div>
      ) : (
        <div className="table-shell">
          <table className="data-table">
            <thead>
              <tr>
                <th>Probe</th>
                <th>Erfasst</th>
                <th>Landwirt</th>
                <th>Kuh</th>
                <th>Typ</th>
                <th>Interne Bemerkung</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {samples.map((sample) => (
                <tr key={sample.sampleId}>
                  <td>{sample.sampleNumber}</td>
                  <td>{formatDate(sample.createdAt)}</td>
                  <td>{sample.farmerName}</td>
                  <td>{sample.cowNumber}{sample.cowName ? ` / ${sample.cowName}` : ""}</td>
                  <td>{sample.sampleKindLabel === "DRY_OFF" ? "Trockensteller" : "Milchprobe"}</td>
                  <td>{sample.internalNote ?? "-"}</td>
                  <td>
                    <button
                      type="button"
                      className="table-link"
                      onClick={() => onOpen(sample.sampleNumber)}
                    >
                      Oeffnen
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </section>
  );
}