frontend/src/components/projects/ProjectAllocationTimeline.tsx

import {
  buildAllocationBarSegment,
  formatHoursPerDay,
  projectBarStyle,
} from "../../planner/allocationTimeline";

interface ProjectAllocationTimelineProps {
  dayDates: Date[];
  startDate: string;
  endDate: string;
  color: string;
  allocationPct: number;
  weeklyCapacityHrs: number;
  onClick?: () => void;
}

export function ProjectAllocationTimeline({
  dayDates,
  startDate,
  endDate,
  color,
  allocationPct,
  weeklyCapacityHrs,
  onClick,
}: ProjectAllocationTimelineProps) {
  const totalDays = dayDates.length;
  const segment = buildAllocationBarSegment(dayDates, startDate, endDate);
  const label = formatHoursPerDay(allocationPct, weeklyCapacityHrs);

  return (
    <div className="planner-timeline">
      <div className="planner-day-grid" />
      {segment ? (
        <button
          className={segment.className}
          onClick={onClick}
          style={{
            ...projectBarStyle(segment, totalDays),
            background: color,
            borderTopColor: color,
          }}
          title={label}
          type="button"
        >
          <span className="planner-bar-label">{label}</span>
        </button>
      ) : null}
    </div>
  );
}