import React from "react";

interface StepContentProps {
  price?: number;
  distance?: string;
  link?: string;
}

export function StepContent({ price, distance, link }: StepContentProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 text-sm">
      {price && (
        <div className="flex items-center justify-between">
          <span className="text-gray-500">Prix :</span>
          <span className="font-medium">{price} €</span>
        </div>
      )}
      {distance && (
        <div className="flex items-center justify-between">
          <span className="text-gray-500">Distance :</span>
          <span className="font-medium">{distance}</span>
        </div>
      )}
      {link && (
        <div className="md:col-span-2 mt-2">
          <a
            href={link}
            target="_blank"
            rel="noopener noreferrer"
            className="text-trip-blue hover:underline"
          >
            Plus d'informations
          </a>
        </div>
      )}
    </div>
  );
}