import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import { Clock, MapPin, CalendarX } from "lucide-react";
import { EmptyState } from "@/shared/components/ui/empty-state";

interface ScheduleItem {
  id: string;
  course: string;
  time: string;
  location: string;
  type: "Lecture" | "Workshop" | "Lab";
}

// MOCK_SCHEDULE can be empty to test empty state
const MOCK_SCHEDULE: ScheduleItem[] = [
  {
    id: "1",
    course: "Advanced Web Development",
    time: "09:00 AM - 10:30 AM",
    location: "Room 304",
    type: "Lecture",
  },
  {
    id: "2",
    course: "UI/UX Design Principles",
    time: "11:00 AM - 12:30 PM",
    location: "Design Studio A",
    type: "Workshop",
  },
  {
    id: "3",
    course: "Frontend Frameworks",
    time: "02:00 PM - 03:30 PM",
    location: "Online (Zoom)",
    type: "Lecture",
  },
];

export function TeacherSchedule() {
  const hasSchedule = MOCK_SCHEDULE.length > 0;

  return (
      <Card className="col-span-3">
      <CardHeader>
        <CardTitle>Today&apos;s Schedule</CardTitle>
      </CardHeader>
      <CardContent>
        {!hasSchedule ? (
           <EmptyState
             icon={CalendarX}
             title="No Classes Today"
             description="You have no classes scheduled for today. Enjoy your free time!"
             className="border-none h-[300px]"
           />
        ) : (
          <div className="space-y-4">
            {MOCK_SCHEDULE.map((item) => (
              <div
                key={item.id}
                className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
              >
                <div className="space-y-1">
                  <p className="font-medium leading-none">{item.course}</p>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Clock className="mr-1 h-3 w-3" />
                    <span className="mr-3">{item.time}</span>
                    <MapPin className="mr-1 h-3 w-3" />
                    <span>{item.location}</span>
                  </div>
                </div>
                <Badge variant={item.type === "Lecture" ? "default" : "secondary"}>
                  {item.type}
                </Badge>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}