import { Agent } from '@/types/agent';
import { FiArrowUpLeft } from 'react-icons/fi';
import { Button } from '../ui/button';
import { VerifiedIcon, WhatsappIcon, ShareIcon } from '../icons/RandomIcons';
import Link from 'next/link';

interface AgentCardProps {
  agent: Agent;
}

const AgentCard: React.FC<AgentCardProps> = ({ agent }) => {
  return (
    <div className="flex flex-col items-center bg-slate-50 py-[25px] px-4 gap-[7px] rounded-xl border border-solid border-[#CAD5E2]">
      <img src={agent.imageUrl} className="w-14 h-14 rounded-full object-fill" />
      <div className="flex flex-col self-stretch gap-3">
        <div className="flex flex-col items-center self-stretch gap-1">
          <div className="flex flex-col items-center self-stretch">
            <div className="flex items-center gap-1.5">
              <span className="text-[#1D293D] text-lg font-bold">{agent.name}</span>
              {!!agent.verified && (
                <VerifiedIcon />
              )}
            </div>
          </div>
          <span className="text-[#62748E] text-sm">{`${agent.type} - ${agent.location}`}</span>
        </div>
        <div className="flex w-fit gap-2 items-center self-stretch bg-slate-100 p-1 mx-auto rounded-[9999px]">
          <Link href={`/user-details/${agent.id}`} className="text-[#05222D] font-normal flex items-center bg-[#0525311B] hover:bg-[#0525312B] text-left w-auto py-2 px-4 gap-2 rounded-[9999px] border-0">
            <span className="text-sm">{"التفاصيل"}</span>
            <FiArrowUpLeft />
          </Link>
          <button className="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-[#0525310A] rounded-full transition-colors">
            <WhatsappIcon size={32} />
          </button>
          <button className="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-[#0525310A] rounded-full transition-colors">
            <ShareIcon size={32} />
          </button>
        </div>
      </div>
    </div>
  );
};

export default AgentCard;