import React from "react";
import Card from "./Card";
import Input from "../Input";
import Button from "../Button";

interface ProfileData {
  phoneNumber: string;
  emailAddress: string;
  firstName: string;
  lastName: string;
  dateOfBirth: string;
  address: string;
  imageUrl: string;
}

interface ProfileSectionProps {
  profileData: ProfileData;
  onProfileChange: (field: keyof ProfileData, value: string) => void;
  onUpdate: () => void;
}

export const ProfileSection: React.FC<ProfileSectionProps> = ({
  profileData,
  onProfileChange,
  onUpdate,
}) => {
  return (
    <div id="profile" className="scroll-mt-20">
      <Card title="Profile">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Input
            label="First name"
            placeholder="e.g. John"
            value={profileData.firstName}
            onChange={(e) => onProfileChange('firstName', e.target.value)}
          />
          <Input
            label="Last name"
            placeholder="e.g. Andrew"
            value={profileData.lastName}
            onChange={(e) => onProfileChange('lastName', e.target.value)}
          />
        </div>

        <Input
          label="Email address"
          type="email"
          placeholder="e.g. johnandrew@gmail.com"
          value={profileData.emailAddress}
          onChange={(e) => onProfileChange('emailAddress', e.target.value)}
        />

        <Input
          label="Date of Birth"
          type="text"
          placeholder="e.g. 19th October"
          value={profileData.dateOfBirth}
          onChange={(e) => onProfileChange('dateOfBirth', e.target.value)}
        />

        <Input
          label="Phone number"
          type="tel"
          placeholder="e.g. +2348012345678"
          value={profileData.phoneNumber}
          onChange={(e) => onProfileChange('phoneNumber', e.target.value)}
        />

        <Input
          label="Address"
          placeholder="e.g. 24, Allen Avenue, Ikeja, Lagos"
          value={profileData.address}
          onChange={(e) => onProfileChange('address', e.target.value)}
        />

        <div className="mt-4">
          <Button type="submit" bgColor="#521392" onClick={onUpdate}>
            Update
          </Button>
        </div>
      </Card>
    </div>
  );
};