import React from 'react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { BadgeCheck, PawPrint, ShieldCheck } from 'lucide-react';

type OwnerProfileHeroProps = {
  name: string;
  role: string;
  location: string;
  bannerUrl: string;
  avatarUrl: string;
  isVerified: boolean;
  isHomologated: boolean;
};

export function OwnerProfileHero({
  name,
  role,
  location,
  bannerUrl,
  avatarUrl,
  isVerified,
  isHomologated,
}: OwnerProfileHeroProps) {
  return (
    <div className="relative w-full mb-4">
      <div
        className="w-full h-48 md:h-64 rounded-xl bg-cover bg-center relative overflow-hidden group"
        style={{ backgroundImage: `url("${bannerUrl}")` }}
      >
        <div className="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-all duration-300"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-background-dark to-transparent opacity-90"></div>
      </div>

      <div className="relative -mt-20 px-4 flex flex-col items-center">
        <div className="relative">
          <div
            className="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-32 md:size-40 border-4 border-background-dark shadow-xl"
            style={{ backgroundImage: `url("${avatarUrl}")` }}
          ></div>
          <div className="absolute bottom-2 right-2 flex gap-1">
            {isVerified && (
              <span className="text-white p-1 rounded-full border-4 border-background-dark shadow-md">
                <BadgeCheck className="w-4 h-4" />
              </span>
            )}
            {isHomologated && (
              <span className="bg-blue-500 text-white p-1 rounded-full border-4 border-background-dark shadow-md">
                <ShieldCheck className="w-4 h-4" />
              </span>
            )}
          </div>
        </div>

        <div className="flex flex-col items-center justify-center mt-4 gap-1">
          <h1 className="text-white text-3xl font-bold leading-tight tracking-[-0.015em] text-center">
            {name}
          </h1>
          <div className="flex items-center gap-2 text-text-secondary">
            <PawPrint className="w-4 h-4" />
            <span className="text-base font-normal">{role}</span>
            <span className="mx-1">•</span>
            <span className="text-base font-normal">{location}</span>
          </div>
          <div className="flex items-center gap-2 mt-2">
            {isVerified && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="cursor-help flex items-center gap-1 text-green-400 text-xs font-semibold">
                    <BadgeCheck className="w-4 h-4" /> Verificado
                  </span>
                </TooltipTrigger>
                <TooltipContent className="rounded-xl">Owner verificado</TooltipContent>
              </Tooltip>
            )}
            {isHomologated && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="cursor-help flex items-center gap-1 text-blue-400 text-xs font-semibold">
                    <ShieldCheck className="w-4 h-4" /> Homologado
                  </span>
                </TooltipTrigger>
                <TooltipContent className="rounded-xl">Owner homologado</TooltipContent>
              </Tooltip>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}