interface Photo {
  original_name?: string;
  fileName: string;
}

interface SiteVisitCardProps {
  visitDate: string;
  remark: string;
  photos: Photo[];
  onDownloadPhoto: (fileName: string) => void;
}

export default function SiteVisitCard({ visitDate, remark, photos, onDownloadPhoto }: SiteVisitCardProps) {
  return (
    <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
      <div className="flex items-center justify-between mb-3">
        <div>
          <p className="font-medium text-gray-800">
            Site Visit - {new Date(visitDate).toLocaleDateString()}
          </p>
          <p className="text-sm text-gray-600">{remark}</p>
        </div>
      </div>
      {photos && photos.length > 0 && (
        <div className="grid gap-2 mt-3">
          {photos.map((photo, photoIndex) => (
            <div key={photoIndex} className="flex items-center justify-between p-2 bg-white rounded border">
              <span className="text-sm text-gray-700">{photo.original_name || photo.fileName}</span>
              <button
                onClick={() => onDownloadPhoto(photo.fileName)}
                className="px-3 py-1 bg-teal-600 text-white text-sm rounded hover:bg-teal-700 transition-colors"
              >
                Download
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}