# Profile Component Documentation

## Overview
The Profile component is a comprehensive user profile section for PakStay that supports both **Host** and **Guest** profiles with clear visual differentiation, similar to Fiverr's approach.

## Design Consistency
- **Font**: Figtree (matching landing page)
- **Borders**: Bold 4px black borders
- **Shadows**: `shadow-[8px_8px_0px_rgba(0,0,0,1)]` effect
- **Accent Color**: Lime green `#E7FE78`
- **Animations**: GSAP-powered smooth transitions
- **Hover Effects**: Scale and shadow transformations

## Features

### 1. Profile Header
- **Avatar**: Circular profile picture with camera upload button
- **Verification Badge**: Blue checkmark for verified users
- **Superhost Badge**: Lime green badge for top-rated hosts
- **Contact Info**: Email and phone display
- **Verification Badges**: Email, ID, and Phone verification status
- **Edit Profile Button**: Quick access to profile editing

### 2. Host/Guest Toggle (Fiverr-Style)
For users who are both hosts and guests:
- **Toggle Buttons**: Switch between "Guest Profile" and "Host Dashboard"
- **Smooth Transitions**: GSAP animations when switching views
- **Visual Indicator**: Active tab highlighted with lime green background

### 3. Guest Profile View

#### Stats Cards (3 columns)
- **Reviews**: Total reviews with average rating
- **Total Bookings**: Number of completed stays
- **Wishlist**: Saved properties count

#### Recent Bookings Section
- Property name and location
- Booking dates
- Status badges (Upcoming/Completed)
- Hover effects

#### Quick Actions Sidebar
- Payment Methods
- Notifications
- Privacy & Security
- Language & Region
- Messages
- Sign Out (red variant)

#### Reviews from Hosts
- Host name and property
- Star rating (1-5)
- Review date
- Comment text

### 4. Host Dashboard View

#### Host Stats (4 columns)
- **Properties**: Number of active listings
- **Rating**: Average rating with review count
- **Response Rate**: Percentage with response time
- **Total Bookings**: All-time booking count

#### My Properties Section
- Property cards with:
  - Name and location
  - Rating and review count
  - Total bookings
  - Status (Active/Inactive)
- **Add New Property** button

#### Host Tools Sidebar
- Calendar
- Analytics
- Earnings
- Messages
- Notifications
- Settings

#### Achievement Badge
- Superhost medal
- Achievement description
- Gradient background

#### Recent Guest Reviews
- Guest name and property
- Star rating
- Review date
- Comment

## Component Structure

```
Profile (Main Component)
├── ProfileData Interface
├── Header Section
│   ├── Avatar with verification
│   ├── Profile Info
│   ├── Contact Details
│   └── Verification Badges
├── Host/Guest Toggle
└── Content Area
    ├── GuestProfile Component
    │   ├── Stats Cards
    │   ├── Recent Bookings
    │   ├── Quick Actions
    │   └── Reviews
    └── HostDashboard Component
        ├── Host Stats
        ├── My Properties
        ├── Host Tools
        ├── Achievement Badge
        └── Guest Reviews

Reusable Components:
├── StatCard
├── SectionCard
├── QuickActionButton
├── BookingItem
├── PropertyItem
└── ReviewItem
```

## Data Structure

```typescript
interface ProfileData {
    name: string;
    email: string;
    phone: string;
    location: string;
    joinDate: string;
    bio: string;
    avatar: string;
    isVerified: boolean;
    isHost: boolean;
    stats: {
        totalReviews: number;
        rating: number;
        responseRate?: number;
        responseTime?: string;
        properties?: number;
        totalBookings?: number;
        wishlistCount?: number;
    };
}
```

## Usage

```tsx
import Profile from '@/components/Profile/profile';

function ProfilePage() {
    return (
        <div>
            <Profile />
        </div>
    );
}
```

## Customization

### Mock Data
The component currently uses mock data. Replace the `profileData` state with actual data from your backend:

```tsx
const [profileData, setProfileData] = useState<ProfileData>({
    // Your data from API
});
```

### Styling
All styling uses Tailwind CSS classes consistent with the PakStay design system. Key classes:
- `border-4 border-black` - Bold borders
- `shadow-[8px_8px_0px_rgba(0,0,0,1)]` - Signature shadow
- `bg-[#E7FE78]` - Lime green accent
- `hover:scale-105` - Hover animation
- `transition-all duration-300` - Smooth transitions

## Responsive Design
- **Mobile**: Single column layout
- **Tablet**: 2-column grid for some sections
- **Desktop**: Full 3-column layout with sidebar

## Animations
- **Page Load**: Fade in from bottom (GSAP)
- **Tab Switch**: Fade out/in transition (GSAP)
- **Hover**: Scale and shadow effects (CSS)

## Icons
Uses **Phosphor Icons** for all iconography:
- User, Star, MapPin, Calendar, Heart, House
- CheckCircle, ShieldCheck, Envelope, Phone
- And many more...

## Future Enhancements
1. **Edit Mode**: Implement actual profile editing functionality
2. **Image Upload**: Connect camera button to file upload
3. **API Integration**: Replace mock data with real backend calls
4. **Settings Pages**: Create dedicated pages for each quick action
5. **Analytics Dashboard**: Expand host analytics section
6. **Messaging**: Integrate real-time messaging
7. **Notifications**: Add notification center
8. **Payment Integration**: Connect payment methods management

## Notes
- The component is fully typed with TypeScript
- All text uses the Figtree font for consistency
- The design follows the PakStay brand guidelines
- Accessibility features can be enhanced with ARIA labels
