interface BlogPricingProps {
  free?: string;
  paid?: string;
  perImage?: string;
  sdk?: string;
}

export const BlogPricing = ({ free, paid, perImage, sdk }: BlogPricingProps) => {
  return (
    <div className="my-6 rounded-lg border-l-4 border-emerald-500 bg-gray-50 px-5 py-4">
      <div className="flex flex-wrap gap-x-8 gap-y-2 text-sm">
        {free && (
          <div>
            <span className="text-gray-500">Free: </span>
            <span className="font-semibold text-gray-900">{free}</span>
          </div>
        )}
        {paid && (
          <div>
            <span className="text-gray-500">Paid: </span>
            <span className="font-semibold text-gray-900">{paid}</span>
          </div>
        )}
        {perImage && (
          <div>
            <span className="text-gray-500">Per image: </span>
            <span className="font-bold text-emerald-600 text-base">{perImage}</span>
          </div>
        )}
        {sdk && (
          <div>
            <span className="text-gray-500">SDK: </span>
            <span className="font-medium text-gray-700">{sdk}</span>
          </div>
        )}
      </div>
    </div>
  );
};