'use client';

interface BasicInfoSectionProps {
  formData: {
    name: string;
    description: string;
    slug: string;
    contest_category: string;
  };
  updateFormData: (updates: Partial<BasicInfoSectionProps['formData']>) => void;
}

export default function BasicInfoSection({
  formData,
  updateFormData,
}: BasicInfoSectionProps) {
  return (
    <div className='rounded-lg border border-border-primary bg-background-secondary p-6'>
      <h3 className='mb-4 text-lg font-semibold text-foreground-primary'>
        Basic Information
      </h3>
      <div className='space-y-4'>
        <div>
          <label
            htmlFor='name'
            className='mb-2 block text-sm font-medium text-foreground-primary'
          >
            Contest Name *
          </label>
          <input
            id='name'
            type='text'
            required
            value={formData.name}
            onChange={(e) => updateFormData({ name: e.target.value })}
            className='w-full rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
            placeholder='e.g., Summer Music Challenge 2024'
          />
        </div>

        <div>
          <label
            htmlFor='description'
            className='mb-2 block text-sm font-medium text-foreground-primary'
          >
            Description * (Home Page)
          </label>
          <textarea
            id='description'
            required
            rows={4}
            value={formData.description}
            onChange={(e) => updateFormData({ description: e.target.value })}
            className='w-full resize-none rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
            placeholder='Small description of the contest for the home page'
          />
          <p className='mt-1 text-xs text-foreground-secondary'>
            This description appears on the home page contest card. To edit the
            hero page description, use the "Landing Page Content" section below.
          </p>
        </div>

        <div>
          <label
            htmlFor='category'
            className='mb-2 block text-sm font-medium text-foreground-primary'
          >
            Category
          </label>
          <select
            id='category'
            value={formData.contest_category}
            onChange={(e) =>
              updateFormData({ contest_category: e.target.value })
            }
            className='w-full rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
          >
            <option value=''>Select a category</option>
            <option value='community'>Community</option>
            <option value='collab'>Collab</option>
          </select>
        </div>

        <div>
          <label
            htmlFor='slug'
            className='mb-2 block text-sm font-medium text-foreground-primary'
          >
            URL *
          </label>
          <div className='flex items-center gap-2'>
            <span className='shrink-0 text-sm text-foreground-secondary'>
              /collab/
            </span>
            <input
              id='slug'
              type='text'
              required
              pattern='^[a-z0-9]+(?:-[a-z0-9]+)*$'
              title='URL can only contain lowercase letters, numbers, and hyphens. Cannot start or end with a hyphen.'
              value={formData.slug}
              onChange={(e) => updateFormData({ slug: e.target.value })}
              className='min-w-0 flex-1 rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
              placeholder='summer-challenge-2024'
            />
          </div>
          <p className='mt-1 text-xs text-foreground-secondary'>
            URL must be unique and should be URL-friendly (lowercase, hyphens
            allowed).
          </p>
        </div>
      </div>
    </div>
  );
}