'use client';

import { User } from '@/types/user';
import { formatDate, formatPrice, getFullName, getEmail, getMobile } from '@/lib/utils';
import { CalendarIcon, EnvelopeIcon, PhoneIcon, WalletIcon, UserIcon } from '@heroicons/react/24/outline';

interface UserInfoProps {
    user: User;
}

export default function UserInfo({ user }: UserInfoProps) {
    return (
        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl mb-6">
            <div className="px-4 py-5 sm:px-6">
                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                    اطلاعات کاربر
                </h3>
            </div>
            <div className="border-t border-gray-200 dark:border-gray-800">
                <dl>
                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">نام کامل</dt>
                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
                            <UserIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                            {getFullName(user)}
                        </dd>
                    </div>
                    <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">ایمیل</dt>
                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
                            <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                            {getEmail(user.email)}
                        </dd>
                    </div>
                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">شماره موبایل</dt>
                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
                            <PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                            {getMobile(user.mobile)}
                        </dd>
                    </div>
                    <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">کیف پول</dt>
                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
                            <WalletIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                            {formatPrice(user.wallet)} تومان
                        </dd>
                    </div>
                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ عضویت</dt>
                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
                            <CalendarIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
                            {formatDate(user.created_at)}
                        </dd>
                    </div>
                    {user.birthday && (
                        <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ تولد</dt>
                            <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
                                {formatDate(user.birthday)}
                            </dd>
                        </div>
                    )}
                    {user.gender && (
                        <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">جنسیت</dt>
                            <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
                                {user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
                            </dd>
                        </div>
                    )}
                </dl>
            </div>
        </div>
    );
}