import { cn } from "@/lib/utils";
import React from "react";
export const Card = ({
  className,
  ...p
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "rounded-2xl border border-white/10 bg-zinc-950/70 p-5 shadow-2xl shadow-black/20 backdrop-blur light:bg-white light:border-zinc-200",
      className,
    )}
    {...p}
  />
);
export const Button = ({
  className,
  ...p
}: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
  <button
    className={cn(
      "focus-ring inline-flex items-center justify-center rounded-xl bg-white px-4 py-2 text-sm font-medium text-zinc-950 transition hover:bg-zinc-200 disabled:opacity-50 dark:bg-zinc-100",
      className,
    )}
    {...p}
  />
);
export const Input = ({
  className,
  ...p
}: React.InputHTMLAttributes<HTMLInputElement>) => (
  <input
    className={cn(
      "focus-ring w-full rounded-xl border border-white/10 bg-zinc-900/80 px-3 py-2 text-sm text-zinc-50 placeholder:text-zinc-500 light:bg-white light:text-zinc-950 light:border-zinc-200",
      className,
    )}
    {...p}
  />
);
export const Badge = ({
  className,
  ...p
}: React.HTMLAttributes<HTMLSpanElement>) => (
  <span
    className={cn(
      "inline-flex rounded-full bg-blue-500/15 px-2 py-1 text-xs text-blue-300",
      className,
    )}
    {...p}
  />
);