// components/partials/badge/Badge04.tsx
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 Badge04 = () => {
  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 bg-[#465fff] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
        <PlusIcon />
        Primary
      </span>

      {/* Success Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#12b76a] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
        <PlusIcon />
        Success
      </span>

      {/* Error Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f04438] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
        <PlusIcon />
        Error
      </span>

      {/* Warning Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f79009] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
        <PlusIcon />
        Warning
      </span>

      {/* Info Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#0ba5ec] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
        <PlusIcon />
        Info
      </span>

      {/* Light Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#98a2b3] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80">
        <PlusIcon />
        Light
      </span>

      {/* Dark Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#1d2939] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white">
        <PlusIcon />
        Dark
      </span>
    </div>
  );
};

export default Badge04;