import { DatabaseZap, RadioTower } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export function LeaderboardError({ source }: { source: "database" | "discord" }) {
  const Icon = source === "database" ? DatabaseZap : RadioTower;

  return (
    <Card role="alert">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Icon />
          {source === "database"
            ? "โหลดข้อมูลอันดับไม่สำเร็จ"
            : "โหลดรายชื่อห้อง Discord ไม่สำเร็จ"}
        </CardTitle>
        <CardDescription>
          {source === "database"
            ? "ฐานข้อมูลอันดับยังไม่พร้อมใช้งาน ลองเปิดหน้านี้ใหม่อีกครั้ง"
            : "ยังเลือกขอบเขตห้องเสียงไม่ได้ ลองเปิดหน้านี้ใหม่เมื่อ Discord พร้อมใช้งาน"}
        </CardDescription>
      </CardHeader>
      <CardContent className="text-sm text-muted-foreground">
        หน้านี้ไม่มีการดึงข้อมูลซ้ำอัตโนมัติระหว่างที่ระบบขัดข้อง
      </CardContent>
    </Card>
  );
}