sarlink-portal/components/input-read-only.tsx

import { cn } from '@/lib/utils';
import { CheckCheck, X } from 'lucide-react';

export default function InputReadOnly({ label, value, labelClassName, className, showCheck = true, checkTrue = false }: {
  label: string;
  value: string;
  labelClassName?: string;
  className?: string;
  showCheck?: boolean;
  checkTrue?: boolean
}) {
  return (
    <div className={cn("relative flex items-center justify-between rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-80 [&:has(input:is(:disabled))_*]:pointer-events-none", className)}>
      <div>

        <label htmlFor="input-33" className={cn("block px-3 pt-2 text-xs font-medium", labelClassName)}>
          {label}
        </label>
        <input
          id="input-33"
          className="flex h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
          placeholder={value}
          disabled
          value={value}
          type="text"
        />
      </div>

      {showCheck && (
        <div>
          {checkTrue ? (
            <CheckCheck className='mx-4 text-green-500' />
          ) : (
            <X className='mx-4 text-red-500' />
          )}
        </div>
      )}
    </div>

  )
}