import { PersonData } from '@/lib/peopleData'

interface PersonTemplateProps {
  personData: PersonData
  biography: string
}

export function PersonTemplate({ personData, biography }: PersonTemplateProps) {
  return (
    <div className="overflow-hidden bg-white">
      <div className="relative mx-auto max-w-7xl px-6 py-16 lg:px-8">
        <div className="absolute top-0 bottom-0 left-3/4 hidden w-screen bg-gray-50 lg:block" />
        <div className="mx-auto max-w-prose text-base lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-8">
          <div>
            <div className="flex items-center gap-2">
              <h2 className="text-lg font-semibold text-indigo-600">Team Member</h2>
              {personData.tags?.length ? (
                <div className="flex flex-wrap gap-2">
                  {personData.tags.map((tag) => (
                    <span
                      key={tag}
                      className="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-medium text-indigo-600"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              ) : null}
            </div>
            <h3 className="mt-2 text-3xl/8 font-bold tracking-tight text-gray-900 sm:text-4xl">Meet {personData.name}</h3>
          </div>
        </div>
        <div className="mt-8 lg:grid lg:grid-cols-2 lg:gap-8">
          <div className="relative lg:col-start-2 lg:row-start-1">
            <svg
              fill="none"
              width={404}
              height={384}
              viewBox="0 0 404 384"
              aria-hidden="true"
              className="absolute top-0 right-0 -mt-20 -mr-20 hidden lg:block"
            >
              <defs>
                <pattern
                  x={0}
                  y={0}
                  id="de316486-4a29-4312-bdfc-fbce2132a2c1"
                  width={20}
                  height={20}
                  patternUnits="userSpaceOnUse"
                >
                  <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
                </pattern>
              </defs>
              <rect fill="url(#de316486-4a29-4312-bdfc-fbce2132a2c1)" width={404} height={384} />
            </svg>
            <div className="relative mx-auto max-w-prose text-base lg:max-w-none">
              <figure>
                <img
                  alt={personData.name}
                  src={personData.imageUrl}
                  width={592}
                  height={688}
                  className="aspect-12/7 w-1/2 mx-auto rounded-lg object-cover shadow-lg lg:aspect-auto"
                />
              </figure>
            </div>
          </div>
          <div className="mt-8 lg:mt-0">
            <div className="mx-auto text-base/7 text-gray-500">
              <p className="text-lg/7 font-semibold text-gray-900">{personData.role}</p>
              {personData.note ? <p className="mt-3 text-sm italic text-gray-500">{personData.note}</p> : null}
              <div 
                className="prose prose-gray mt-4 max-w-none"
                dangerouslySetInnerHTML={{ __html: biography }}
              />
              
              {/* Social Links */}
              {personData.linkedinUrl && personData.linkedinUrl !== '#' && (
                <div className="mt-8">
                  <a 
                    href={personData.linkedinUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                  >
                    Connect on LinkedIn
                  </a>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
