import React from "react";
import { TextBox } from "@/components/ui/TextBox";

interface BaseDisplayFieldProps {
  label: string;
  value: string | number;
  placeholder?: string;
  className?: string;
}

export function BaseDisplayField({ 
  label, 
  value, 
  placeholder = "Auto-calculated",
  className = ""
}: BaseDisplayFieldProps) {
  return (
    <div className={`group ${className}`}>
      <div className="relative">
        <TextBox
          label={label}
          placeholder={placeholder}
          type="text"
          className="text-sm bg-gradient-to-r from-slate-50 to-slate-100/50 border-slate-300/50 font-semibold text-slate-700"
          value={value}
          readOnly
          disabled={true}
        />
        <div className="absolute inset-0 pointer-events-none rounded-lg bg-gradient-to-br from-[#428B4D]/5 to-transparent"></div>
      </div>
    </div>
  );
}