"use client";

import React from "react";
import { TimelineSchedulerConfig } from "../types";
import { statusOptions } from "../config";

interface TimelineLegendProps {
  config: TimelineSchedulerConfig;
}

export function TimelineLegend({ config }: TimelineLegendProps) {
  const colors = config.statusColors || {};

  return (
    <div className="flex flex-wrap items-center gap-2 border-t bg-muted/20 px-2 py-1 sm:gap-3 sm:px-3 sm:py-1.5">
      <span className="text-[10px] font-medium text-muted-foreground sm:text-xs">
        범례:
      </span>
      {statusOptions.map((status) => (
        <div key={status.value} className="flex items-center gap-1">
          <div
            className="h-2 w-4 rounded-sm sm:h-2.5 sm:w-5"
            style={{
              backgroundColor:
                colors[status.value as keyof typeof colors] || status.color,
            }}
          />
          <span className="text-[9px] text-muted-foreground sm:text-[10px]">
            {status.label}
          </span>
        </div>
      ))}

      {/* 마일스톤 범례 */}
      <div className="flex items-center gap-1">
        <div className="flex h-2.5 w-4 items-center justify-center sm:h-3 sm:w-5">
          <div className="h-1.5 w-1.5 rotate-45 bg-foreground/60 sm:h-2 sm:w-2" />
        </div>
        <span className="text-[9px] text-muted-foreground sm:text-[10px]">
          마일스톤
        </span>
      </div>

      {/* 충돌 범례 */}
      {config.showConflicts && (
        <div className="flex items-center gap-1">
          <div className="h-2 w-4 rounded-sm ring-1.5 ring-destructive sm:h-2.5 sm:w-5" />
          <span className="text-[9px] text-muted-foreground sm:text-[10px]">
            충돌
          </span>
        </div>
      )}
    </div>
  );
}
