import Image from 'next/image';
import { Button } from '@/components/ui/button';
import { ArrowUpLeft, ShareIcon, BadgeCheck } from 'lucide-react';

// Simplified interface that accepts what the parent provides
interface AgentCardProps {
  id: number;
  name: string;
  location: string;
  image: string;
  index: number;
  // Color is now required or we can provide a default.
  // The parent calculates it: 'green' | 'black' | 'blue' | 'white'
  color: string; // broadened string for simplicity or keep union if strict
}


export function AgentCard({ name, location, index, color, image }: AgentCardProps) {
  return (
    <div className={`agent-card sm:shrink-0 w-[255px] h-[190px] p-3 rounded-[26px] overflow-hidden flex flex-col items-center justify-center ${getColorClass(color)}`}
    // REMOVED: style={{ transform: `translateX(${ index * 80}px)`, zIndex: 10 - index }}
    >

      <Image
        src={image}
        alt={name}
        width={42}
        height={42}
className="rounded-full mb-0.5"
      />

  <h3
  className={`text-[13px] font-semibold text-center leading-tight ${getTextColor(color)}`}
>
  {name}
</h3>

<p
  className={`text-[11px] font-medium mt-1 text-center leading-tight line-clamp-2 ${getTextColor(color)}`}
>
  {location}
</p>

<div className="flex items-center gap-2 mt-3">
          <Button
          variant="outline"
          size="sm"
         className={`
  flex
  items-center
  justify-center
  gap-1.5
  rounded-full
  h-[32px]
  w-[155px]
bg-white/20
  backdrop-blur-md
  border border-white/20
  shadow-sm
  text-[11px]
  font-semibold
  transition-all
  duration-300
  hover:scale-[1.02]
  hover:bg-white
  ${getButtonTextColor(color)}
`}

          asChild
        >
          <a href="/agents/1">
            مشاهدة التفاصيل
<ArrowUpLeft className="mr-1 h-3.5 w-3.5" />

          </a>
        </Button>

<ShareIcon
  className={`h-4 w-4 ${
    color === 'black' || color === 'blue'
      ? 'text-white'
      : 'text-[#0F172B]'
  }`}
/>



      </div>

    </div>
  );
}

function getColorClass(color: string) {
  switch (color) {
    case 'white':
      return 'bg-white text-gray-800';
    case 'blue':
      return 'bg-blue-500 text-white';
    case 'black':
      return 'bg-black text-white';
    case 'green':
      return 'bg-[#00C950] text-white';
    default:
      return 'bg-white text-gray-800';
  }
}

function getTextColor(color: string) {
  switch (color) {
    case 'white':
    case 'green':
      return 'text-gray-800';
    case 'blue':
    case 'black':
      return 'text-white';
    default:
      return 'text-gray-800';
  }
}

function getButtonTextColor(color: string) {
  switch (color) {
    case 'white':
      return 'text-black';
    case 'blue':
    case 'black':
    case 'green':
      return 'text-[#314158]';
    default:
      return 'text-[#314158]';
  }
}