import React from 'react';
import { Input } from '@/components/ui/input';
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from '@/components/ui/form';
import { UnknownRecord } from '@/types';

export default function StepOneInfo({ titles }: { titles: UnknownRecord }) {
  const titleArray = Array.isArray(titles)
    ? titles
    : Object.values(titles || {});

  return (
    <>
      {titleArray.map((titleObj: UnknownRecord, index: number) => {
        const displayTitle = titleObj?.title || '';
        const displayText = titleObj?.value || '';

        return (
          <FormField
            key={index}
            name={`product_id_disable_${index}`}
            render={() => (
              <FormItem className="w-full md:w-1/2 lg:w-1/4 p-2 rounded-full">
                <FormLabel className="no-error-styles font-bold">
                  <span className="text-red-600 pl-1">*</span> {displayTitle}
                </FormLabel>

                <FormControl>
                  <Input
                    autoComplete="off"
                    className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                    value={displayText}
                    disabled
                  />
                </FormControl>
              </FormItem>
            )}
          />
        );
      })}
    </>
  );
}