import clsx from "clsx";

type VehicleSessionItemProps = {
  sessionNumber: number;
  textColour: string;
  vehicleTag: string;
};

const VehicleSessionItem = ({ sessionNumber, textColour, vehicleTag }: VehicleSessionItemProps) => {
  return (
    <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between items-center">
      <p>{vehicleTag}</p>
      <span className={`font-bold text-xl bg-slate-700 px-2 rounded-md ${clsx(textColour)}`}>{sessionNumber}</span>
    </li>
  );
};

export default VehicleSessionItem;