Untitled

"use client";

import React, { useEffect, useState } from 'react';
import userData from '../../../mock_data/user.json';
import "./Profile.css";

const ProfilePage = () => {
  const [profileData, setProfileData] = useState(userData);
  const [isEditing, setIsEditing] = useState(false);
  const [formData, setFormData] = useState(userData);

  const handleEditClick = () => {
    setIsEditing(true);
  };

  const handleSaveClick = () => {
    setProfileData(formData);
    setIsEditing(false);
    // Here you would also update the JSON data on the server or local storage
  };

  const handleCancelClick = () => {
    setFormData(profileData);
    setIsEditing(false);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleToggleTag = (tag: string) => {
    setFormData({
      ...formData,
      tags: {
        ...formData.tags,
        [tag]: !formData.tags[tag],
      },
    });
  };

  return (
    <div className="profile-container">
      <div className="profile-header">
        <img
          className="profile-image"
          src={profileData.imageUrl}
          alt={profileData.username}
        />
        <h1 className="profile-title">
          <strong>
            {isEditing ? (
              <>
                <div className="profile-row">
                  <h3 className="profile-label">First Name:</h3>
                  <input
                    type="text"
                    name="firstName"
                    value={formData.firstName}
                    onChange={handleChange}
                    className="input input-bordered"
                  />
                </div>
                <div className="profile-row">
                  <h3 className="profile-label">Last Name:</h3>
                  <input
                    type="text"
                    name="lastName"
                    value={formData.lastName}
                    onChange={handleChange}
                    className="input input-bordered"
                  />
                </div>
              </>
            ) : (
              <div className="text-4xl mt-3">
                {profileData.firstName} {profileData.lastName}
              </div>
            )}
          </strong>
        </h1>
      </div>
      <div className="profile-details">
        <div>
          <strong>Username:</strong>{' '}
          {isEditing ? (
            <input
              type="text"
              name="username"
              value={formData.username}
              onChange={handleChange}
              className="input input-bordered"
            />
          ) : (
            profileData.username
          )}
        </div>
        <div className="mt-3">
          <strong>Email:</strong>{' '}
          {isEditing ? (
            <input
              type="text"
              name="email"
              value={formData.email}
              onChange={handleChange}
              className="input input-bordered"
            />
          ) : (
            profileData.email
          )}
        </div>
        <div className="mt-3">
          <strong>Tags:</strong>{' '}
          {isEditing ? (
            <div className="flex space-x-4">
              <div className="form-control">
                <label className="cursor-pointer label">
                  <span className="label-text">Vegetarian</span>
                  <input
                    type="checkbox"
                    className="toggle toggle-emerald"
                    checked={formData.tags.vegetarian}
                    onChange={() => handleToggleTag('vegetarian')}
                  />
                </label>
              </div>
              <div className="form-control">
                <label className="cursor-pointer label">
                  <span className="label-text">Spicy</span>
                  <input
                    type="checkbox"
                    className="toggle toggle-emerald"
                    checked={formData.tags.spicy}
                    onChange={() => handleToggleTag('spicy')}
                  />
                </label>
              </div>
              <div className="form-control">
                <label className="cursor-pointer label">
                  <span className="label-text">Family</span>
                  <input
                    type="checkbox"
                    className="toggle toggle-emerald"
                    checked={formData.tags.family}
                    onChange={() => handleToggleTag('family')}
                  />
                </label>
              </div>
            </div>
          ) : (
            <div>
              {profileData.tags.vegetarian && <span className="badge badge-emerald mr-2">Vegetarian</span>}
              {profileData.tags.spicy && <span className="badge badge-emerald mr-2">Spicy</span>}
              {profileData.tags.family && <span className="badge badge-emerald mr-2">Family</span>}
            </div>
          )}
        </div>
      </div>
      {isEditing ? (
        <>
          <button onClick={handleSaveClick} className="btn btn-success bg-emerald-400 hover:bg-emerald-700 text-slate-100">Save Changes</button>
          <button onClick={handleCancelClick} className="btn btn-secondary ml-2 bg-rose-400 hover:bg-rose-500 text-slate-100">Cancel</button>
        </>
      ) : (
        <button onClick={handleEditClick} className="btn btn-primary profile-change text-slate-100" style={{ backgroundColor: '#10B981' }}>Edit Account</button>
      )}
    </div>
  );
};

export default ProfilePage;

.profile-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #f8fafc;
    font-family: 'Arial', sans-serif;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    background-color: #bbf7d0;
    border-radius: 8px;
    padding: 10px;
}

.profile-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
}

.profile-title {
    font-size: 24px;
    font-weight: bold;
    color: #34d399;
    margin-bottom: 10px;
}

.profile-details {
    line-height: 1.6;
    margin-bottom: 20px;
}

.profile-details p {
    margin: 8px 0;
    color: #555;
}

.profile-details strong {
    color: #333;
}

.profile-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: nowrap; /* Prevents wrapping to the next line */
}

.profile-label {
    font-size: 16px;
    font-weight: bold;
    color: #555;
    margin-right: 10px; /* Space between label and input */
    white-space: nowrap; /* Ensures the label stays on one line */
    width: 120px; /* Optional: Adjust the width of the label */
}

.profile-input {
    flex-grow: 1;
    padding: 8px;
    font-size: 14px;
    border: 2px solid black; /* Black outline */
    border-radius: 6px;
    outline: none;
    transition: box-shadow 0.3s ease;
}

.profile-input:focus {
    box-shadow: 0 0 5px rgba(52, 211, 153, 0.5); /* Green focus shadow */
}


button {
    display: inline-block;
    margin: 10px 5px 0 0;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}


input {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 2px solid black; /* Black outline for all inputs */
    border-radius: 6px;
    outline: none;
    transition: box-shadow 0.3s ease;
}

input:focus {
    box-shadow: 0 0 5px rgba(52, 211, 153, 0.5); /* Subtle green glow on focus */
}