import React from 'react';

const PlusIcon = () => (
  <svg
    className="fill-current"
    width="12"
    height="12"
    viewBox="0 0 12 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
    />
  </svg>
);

const Badge06 = () => {
  return (
    <div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
      {/* Primary Badge */}
      <span
        className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
        style={{ backgroundColor: '#3B82F6' }} // Tailwind's brand-500 equivalent
      >
        Primary
        <PlusIcon />
      </span>

      {/* Success Badge */}
      <span
        className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
        style={{ backgroundColor: '#22C55E' }} // Tailwind's success-500 equivalent
      >
        Success
        <PlusIcon />
      </span>

      {/* Error Badge */}
      <span
        className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
        style={{ backgroundColor: '#EF4444' }} // Tailwind's error-500 equivalent
      >
        Error
        <PlusIcon />
      </span>

      {/* Warning Badge */}
      <span
        className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
        style={{ backgroundColor: '#F59E0B' }} // Tailwind's warning-500 equivalent
      >
        Warning
        <PlusIcon />
      </span>

      {/* Info Badge */}
      <span
        className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
        style={{ backgroundColor: '#38BDF8' }} // Tailwind's blue-light-500 equivalent
      >
        Info
        <PlusIcon />
      </span>

      {/* Light Badge */}
      <span
        className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
        style={{
          backgroundColor: '#9CA3AF', // Tailwind's gray-400
          color: 'rgba(255, 255, 255, 0.8)',
        }}
      >
        Light
        <PlusIcon />
      </span>

      {/* Dark Badge */}
      <span
        className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
        style={{
          backgroundColor: '#1F2937', // Tailwind's gray-800
          color: '#ffffff',
        }}
      >
        Dark
        <PlusIcon />
      </span>
    </div>
  );
};

export default Badge06;
