"use client";

import { FaUsers } from "react-icons/fa6";

import { SlotItem } from "@/types/participant-list/provisional-types";
import { useTimezone } from "@/components/pages/client/participant-list/common/timezone-context";
import { formatSessionTime } from "@/components/pages/client/participant-list/common/format-session-time";

type SlotCardProps = {
  slot: SlotItem;
  onClick?: (sessionId: string) => void;
};

function SlotCard({ slot, onClick }: SlotCardProps) {
  const { timezone } = useTimezone();
  const isFull = slot.filled >= slot.total;
  const clickable = Boolean(onClick);

  return (
    <button
      aria-label={`View session details for ${formatSessionTime(
        slot.startTime,
        timezone,
      )}`}
      className={`w-full text-left rounded-lg p-2 text-xs transition ${
        clickable
          ? "cursor-pointer hover:ring-1 hover:ring-midnightBlue/40 focus:outline-none focus:ring-2 focus:ring-midnightBlue/60"
          : "cursor-default"
      } ${
        isFull
          ? "bg-midnightBlue/15 border border-midnightBlue/30"
          : "bg-gray-200 dark:bg-neutral-800"
      }`}
      disabled={!clickable}
      type="button"
      onClick={() => onClick?.(slot.sessionId)}
    >
      <p className="font-semibold text-gray-900 dark:text-white">
        {formatSessionTime(slot.startTime, timezone)}
      </p>
      <p
        className={`flex items-center gap-1 mt-0.5 ${
          isFull
            ? "text-midnightBlue font-medium"
            : "text-gray-500 dark:text-neutral-400"
        }`}
      >
        <FaUsers className="h-2.5 w-2.5" />
        {slot.filled}/{slot.total}
        {isFull ? " · Full" : " spots"}
      </p>
    </button>
  );
}

export default SlotCard;