"use client"

import { CheckCircle, Clock, Plane, Activity, XCircle } from 'lucide-react'

export function EmployeeLegend() {
  return (
    <div className="flex flex-wrap gap-3">
      <div className="flex items-center gap-2">
        <div className="w-4 h-4 rounded border bg-emerald-500/20 text-emerald-300/70 border-emerald-400/80 flex items-center justify-center">
          <CheckCircle className="h-3 w-3" />
        </div>
        <span className="text-white/70 text-sm">Рабочий день</span>
      </div>
      <div className="flex items-center gap-2">
        <div className="w-4 h-4 rounded border bg-purple-500/20 text-purple-300/70 border-purple-400/80 flex items-center justify-center">
          <Clock className="h-3 w-3" />
        </div>
        <span className="text-white/70 text-sm">Выходной</span>
      </div>
      <div className="flex items-center gap-2">
        <div className="w-4 h-4 rounded border bg-blue-500/20 text-blue-300/70 border-blue-400/80 flex items-center justify-center">
          <Plane className="h-3 w-3" />
        </div>
        <span className="text-white/70 text-sm">Отпуск</span>
      </div>
      <div className="flex items-center gap-2">
        <div className="w-4 h-4 rounded border bg-yellow-500/20 text-yellow-300/70 border-yellow-400/80 flex items-center justify-center">
          <Activity className="h-3 w-3" />
        </div>
        <span className="text-white/70 text-sm">Больничный</span>
      </div>
      <div className="flex items-center gap-2">
        <div className="w-4 h-4 rounded border bg-red-500/20 text-red-300/70 border-red-400/80 flex items-center justify-center">
          <XCircle className="h-3 w-3" />
        </div>
        <span className="text-white/70 text-sm">Прогул</span>
      </div>
    </div>
  )
}