import { ChevronDown } from "lucide-react";

export function ModelInfoSkeleton({ isDark }: { isDark: boolean }) {
  return (
    <div
      className={`rounded-xl border ${isDark ? "bg-gray-800 border-none" : "bg-card"} p-6`}
    >
      <div className="mb-4 flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <div className="flex items-center pr-3 h-9 w-64 rounded-md border border-border">
            <ChevronDown className="ml-auto h-4 w-4 text-gray-400" />
          </div>
        </div>

        <div
          className={`h-4.5 w-13.5 rounded-full bg-gray-200 ${isDark ? "bg-gray-600" : ""}`}
        />
      </div>

      <div className="mb-6 min-h-10 space-y-2">
        <div
          className={`h-4 w-3/4 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
        />
        <div
          className={`h-4 w-1/2 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
        />
      </div>

      <div className="grid grid-cols-2 gap-4 mb-2">
        {[1, 2, 3, 4].map((i) => (
          <div
            key={i}
            className="flex items-center gap-3 rounded-lg border border-border/40 bg-secondary/50 p-3"
          >
            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted/60">
              <div
                className={`h-7 w-7 rounded bg-gray-200 ${isDark ? "bg-gray-600" : ""}`}
              />
            </div>

            <div className="flex-1 space-y-2">
              <div
                className={`h-3 w-20 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
              />
              <div
                className={`h-4 w-15 rounded bg-gray-200 ${isDark ? "bg-gray-600" : ""}`}
              />
            </div>
          </div>
        ))}
      </div>

      <div className="mt-8 space-y-3 border-t pt-4">
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex items-center justify-between">
            <div
              className={`h-4 w-32 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
            />
            <div
              className={`h-4 w-44 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
            />
          </div>
        ))}
      </div>
    </div>
  );
}