'use client';

import Tooltip from '@/components/Tooltip';

export default function DaisyUIDemo() {
  return (
    <main className="min-h-screen bg-base-200 py-8">
      <div className="max-w-2xl mx-auto space-y-8">
        <h1 className="text-3xl font-bold text-base-content mb-2">DaisyUI Component Demo</h1>
        <p className="text-base-content/70 mb-6">Test and validate DaisyUI components and theme integration.</p>

        {/* Alerts */}
        <section>
          <h2 className="text-xl font-semibold mb-2">Alerts</h2>
          <div className="space-y-2">
            <div className="alert alert-info">
              <span className="inline-flex items-center justify-center rounded-full bg-info text-info-content w-8 h-8 mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current w-5 h-5">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </span>
              <span>This is a DaisyUI info alert! 🎉</span>
            </div>
            <div className="alert alert-success">
              <span className="inline-flex items-center justify-center rounded-full bg-success text-success-content w-8 h-8 mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current w-5 h-5" fill="none" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </span>
              <span>DaisyUI is working perfectly with your theme!</span>
            </div>
            <div className="alert alert-warning">
              <span className="inline-flex items-center justify-center rounded-full bg-warning text-warning-content w-8 h-8 mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current w-5 h-5" fill="none" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                </svg>
              </span>
              <span>This is a warning alert example</span>
            </div>
            <div className="alert alert-error">
              <span className="inline-flex items-center justify-center rounded-full bg-error text-error-content w-8 h-8 mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current w-5 h-5" fill="none" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </span>
              <span>This is an error alert example</span>
            </div>
          </div>
        </section>

        {/* Buttons */}
        <section>
          <h2 className="text-xl font-semibold mb-2">Buttons</h2>
          <div className="flex flex-wrap gap-2">
            <button className="btn btn-primary">Primary</button>
            <button className="btn btn-secondary">Secondary</button>
            <button className="btn btn-accent">Accent</button>
            <button className="btn btn-info">Info</button>
            <button className="btn btn-success">Success</button>
            <button className="btn btn-warning">Warning</button>
            <button className="btn btn-error">Error</button>
            <button className="btn btn-outline">Outline</button>
            <button className="btn btn-disabled" disabled>Disabled</button>
          </div>
        </section>

        {/* Cards */}
        <section>
          <h2 className="text-xl font-semibold mb-2">Cards</h2>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body">
              <h2 className="card-title">DaisyUI Card</h2>
              <p>This is a sample card using DaisyUI's card component.</p>
              <div className="card-actions justify-end">
                <button className="btn btn-primary">Action</button>
              </div>
            </div>
          </div>
        </section>

        {/* Badges */}
        <section>
          <h2 className="text-xl font-semibold mb-2">Badges</h2>
          <div className="flex flex-wrap gap-2">
            <span className="badge badge-primary">Primary</span>
            <span className="badge badge-secondary">Secondary</span>
            <span className="badge badge-accent">Accent</span>
            <span className="badge badge-info">Info</span>
            <span className="badge badge-success">Success</span>
            <span className="badge badge-warning">Warning</span>
            <span className="badge badge-error">Error</span>
          </div>
        </section>

        {/* Tooltip */}
        <section>
          <h2 className="text-xl font-semibold mb-2">Tooltip</h2>
          <Tooltip content="This is a DaisyUI tooltip!">
            <button className="btn btn-outline">Hover me</button>
          </Tooltip>
        </section>
      </div>
    </main>
  );
}