Label

"use client";

import * as React from "react";
import { IconMail } from "@tabler/icons-react";
import { Label } from "@/components/ui/label";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const Input = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement> & { leftIcon?: React.ReactNode }
>(function Input({ leftIcon, className, ...props }, ref) {
  return (
    <div className="relative flex items-center">
      {leftIcon && (
        <span className="pointer-events-none absolute left-3 text-[var(--muted-foreground)] [&_svg]:size-4">
          {leftIcon}
        </span>
      )}
      <input
        ref={ref}
        className={cn(
          "h-9 w-full rounded-[10px] border border-[var(--border)] bg-[var(--background)] px-3 text-sm text-[var(--foreground)] outline-none placeholder:text-[var(--muted-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
          leftIcon && "pl-9",
          className,
        )}
        {...props}
      />
    </div>
  );
});

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;

function PreviewPanel({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        wensityCardSurfaceClass,
        "w-full max-w-md p-5",
        className,
      )}
    >
      {children}
    </div>
  );
}

function FieldStack({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

export function LabelPreview() {
  return (
    <PreviewPanel>
      <div className="space-y-5">
        <FieldStack>
          <Label htmlFor="label-preview-email">Work email</Label>
          <Input
            id="label-preview-email"
            type="email"
            placeholder="you@company.com"
            leftIcon={<IconMail stroke={1.75} />}
          />
        </FieldStack>
        <FieldStack>
          <Label variant="required" htmlFor="label-preview-required">
            Billing email
          </Label>
          <Input
            id="label-preview-required"
            type="email"
            placeholder="billing@company.com"
            leftIcon={<IconMail stroke={1.75} />}
          />
        </FieldStack>
        <FieldStack>
          <Label variant="optional" htmlFor="label-preview-optional">
            Company
          </Label>
          <Input
            id="label-preview-optional"
            placeholder="Acme Inc."
          />
        </FieldStack>
      </div>
    </PreviewPanel>
  );
}

export default function Demo() {
  return <LabelPreview />;
}