"use client";

import formatPhone from "@/shared/lib/formatPhone";
import { Button } from "@/shared/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
import { BadgeCheck, Phone } from "lucide-react";
import { useTranslation } from "react-i18next";

export interface ProfileData {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  phone: string;
  avatar?: string;
  username: string;
  is_active: boolean;
}

interface ProfileCardProps {
  user: ProfileData;
  onEditClick: () => void;
  isLoading?: boolean;
}

export function ProfileCard({
  user,
  onEditClick,
  isLoading,
}: ProfileCardProps) {
  const { t } = useTranslation();
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <div className="flex items-center gap-4">
          <div>
            <CardTitle className="text-2xl font-semibold">
              {user.first_name} {user.last_name}
            </CardTitle>
            <p className="text-sm text-gray-500">@{user.username}</p>
          </div>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={onEditClick}
          disabled={isLoading}
        >
          {t("Tahrirlash")}
        </Button>
      </CardHeader>

      <CardContent className="grid grid-cols-2 gap-4">
        <div className="flex items-center gap-2">
          <Phone className="h-4 w-4 text-gray-400" />
          <span>{formatPhone(user.phone)}</span>
        </div>
        <div className="flex items-center gap-2">
          <BadgeCheck
            className={`h-4 w-4 ${user.is_active ? "text-green-500" : "text-gray-400"}`}
          />
          <span>{user.is_active ? "Active" : "Inactive"}</span>
        </div>
      </CardContent>
    </Card>
  );
}
