"use client";

import { Label } from "@/components/ui/label";
import { type LocaledStringKey, useLocaleFunction } from "@/hooks/use-localed";
import type { ReactNode } from "react";

export function LabMetaName({ children }: { children: ReactNode }) {
  return (
    <div className="bg-transparent py-1 text-xl font-semibold text-wrap">
      {children}
    </div>
  );
}

export function LabMetaField({
  label,
  labelFor,
  children,
}: {
  label: LocaledStringKey;
  labelFor?: string;
  children: ReactNode;
}) {
  const t = useLocaleFunction();

  return (
    <div className="space-y-2">
      {labelFor ? (
        <Label htmlFor={labelFor}>{t(label)}</Label>
      ) : (
        <div className="text-sm font-bold leading-none">{t(label)}</div>
      )}
      <div className="bg-transparent py-1 text-base text-muted-foreground">
        {children}
      </div>
    </div>
  );
}