"use client";

import React from "react";
import { Label, Textarea } from "ikoncomponents";
import { OthersData } from "../../types";
import { StepErrors } from "../../lib/validation";

interface OthersStepProps {
  data: OthersData;
  onChange: (field: keyof OthersData, value: string) => void;
  errors: StepErrors;
}

const FieldError = ({ message }: { message?: string }) =>
  message ? <p className="text-xs text-destructive mt-1">{message}</p> : null;

const OthersStep: React.FC<OthersStepProps> = ({ data, onChange, errors }) => {
  return (
    <div className="space-y-4">
      <div className="space-y-1.5">
        <Label htmlFor="notes">Notes / Additional Information</Label>
        <Textarea
          id="notes"
          rows={5}
          value={data.notes ?? ""}
          onChange={(e) => onChange("notes", e.target.value)}
          placeholder="Enter any additional notes or remarks..."
          className={errors.notes ? "border-destructive" : ""}
        />
        <FieldError message={errors.notes} />
      </div>
    </div>
  );
};

export default OthersStep;