import React from 'react'
import { UserCircleIcon, EnvelopeIcon, PhoneIcon, MapPinIcon, PencilIcon, CheckCircleIcon } from '@heroicons/react/24/outline'

export default function BasicInformation({ profileData, HighlightIfMissing, onEdit }: {
  profileData: any,
  HighlightIfMissing: React.FC<{ value: any, children: React.ReactNode }>
  onEdit?: () => void
}) {
  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-lg font-semibold text-gray-900">Basic Information</h2>
        <button
          className="flex items-center text-[#8D6B1D] hover:text-[#7A5E1A] transition-colors"
          onClick={onEdit}
        >
          <PencilIcon className="h-4 w-4 mr-1" />
          Edit
        </button>
      </div>
      <div className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              First Name
            </label>
            <div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
              <UserCircleIcon className="h-5 w-5 text-gray-400 mr-3" />
              <HighlightIfMissing value={profileData.firstName}>
                <span className="text-gray-900">{profileData.firstName}</span>
              </HighlightIfMissing>
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Last Name
            </label>
            <div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
              <UserCircleIcon className="h-5 w-5 text-gray-400 mr-3" />
              <HighlightIfMissing value={profileData.lastName}>
                <span className="text-gray-900">{profileData.lastName}</span>
              </HighlightIfMissing>
            </div>
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Email Address
          </label>
          <div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
            <EnvelopeIcon className="h-5 w-5 text-gray-400 mr-3" />
            <HighlightIfMissing value={profileData.email}>
              <span className="text-gray-900">{profileData.email}</span>
            </HighlightIfMissing>
            <CheckCircleIcon className="h-5 w-5 text-green-500 ml-auto" />
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Phone Number
          </label>
          <div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
            <PhoneIcon className="h-5 w-5 text-gray-400 mr-3" />
            <HighlightIfMissing value={profileData.phone}>
              <span className="text-gray-900">{profileData.phone}</span>
            </HighlightIfMissing>
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Address
          </label>
          <div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
            <MapPinIcon className="h-5 w-5 text-gray-400 mr-3" />
            <HighlightIfMissing value={profileData.address}>
              <span className="text-gray-900">{profileData.address}</span>
            </HighlightIfMissing>
          </div>
        </div>
      </div>
    </div>
  )
}