// components/partials/badge/Badge01.tsx
import React from 'react';

const Badge01 = () => {
  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-[#ecf3ff] px-2.5 py-0.5 text-sm font-medium text-[#465fff] dark:bg-[#465fff]/15 dark:text-[#3641f5]">
        Primary
      </span>

      {/* Success Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecfdf3] px-2.5 py-0.5 text-sm font-medium text-[#12b76a] dark:bg-[#12b76a]/15 dark:text-[#039855]">
        Success
      </span>

      {/* Error Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fef3f2] px-2.5 py-0.5 text-sm font-medium text-[#f04438] dark:bg-[#f04438]/15 dark:text-[#d92d20]">
        Error
      </span>

      {/* Warning Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fffaeb] px-2.5 py-0.5 text-sm font-medium text-[#f79009] dark:bg-[#f79009]/15 dark:text-[#fd853a]">
        Warning
      </span>

      {/* Info Badge */}
      <span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f0f9ff] px-2.5 py-0.5 text-sm font-medium text-[#0ba5ec] dark:bg-[#0ba5ec]/15 dark:text-[#0086c9]">
        Info
      </span>

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

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

export default Badge01;