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

interface RemarksInputProps {
  remarks: string;
  setRemarks: (value: string) => void;
}

const RemarksInput: React.FC<RemarksInputProps> = ({ remarks, setRemarks }) => {
  return (
    <div className="group sm:col-span-2 lg:col-span-4 transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10">
      <TextArea
        label="Remarks / Comments"
        placeholder="Enter detailed remarks or comments..."
        value={remarks}
        onChange={(e) => setRemarks(e.target.value)}
        rows={4}
        textareaClass="transition-all duration-200 group-hover:border-[#428B4D]/50 group-hover:shadow-md group-hover:shadow-[#428B4D]/10"
      />
    </div>
  );
};

export default RemarksInput;