import { PlaneIcon } from "lucide-react";

interface StatsProps {
  isChecked: boolean;
}

export const Stats = ({ isChecked }: StatsProps) => {
  return isChecked ? PilotStats() : DispoStats();
};

export const PilotStats = (): JSX.Element => {
  return (
    <div className="stats shadow">
      <div className="stat">
        <div className="stat-figure text-primary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            className="inline-block h-8 w-8 stroke-current"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
            ></path>
          </svg>
        </div>
        <div className="stat-title">Einsätze geflogen</div>
        <div className="stat-value text-primary">127</div>
        <div className="stat-desc">Du bist damit unter den top 5%!</div>
      </div>

      <div className="stat">
        <div className="stat-figure text-secondary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            className="inline-block h-8 w-8 stroke-current"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M13 10V3L4 14h7v7l9-11h-7z"
            ></path>
          </svg>
        </div>
        <div className="stat-title">Pilot Login Zeit</div>
        <div className="stat-value text-secondary">35h 12m</div>
        <div className="stat-desc">Mehr als 58% aller anderen User!</div>
      </div>

      <div className="stat">
        <div className="stat-figure text-info">
          <PlaneIcon className="w-8 h-8" />
        </div>
        <div className="stat-value text-info">Christoph 31</div>
        <div className="stat-title">
          War bisher dein Rettungsmittel der Wahl
        </div>
        <div className="stat-desc text-secondary">
          87 Stationen warten noch auf dich!
        </div>
      </div>
    </div>
  );
};

export const DispoStats = (): JSX.Element => {
  return (
    <div className="stats shadow">
      <div className="stat">
        <div className="stat-figure text-primary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            className="inline-block h-8 w-8 stroke-current"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
            ></path>
          </svg>
        </div>
        <div className="stat-title">Einsätze disponiert</div>
        <div className="stat-value text-primary">578</div>
        <div className="stat-desc">Du bist damit unter den top 9%!</div>
      </div>

      <div className="stat">
        <div className="stat-figure text-secondary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            className="inline-block h-8 w-8 stroke-current"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M13 10V3L4 14h7v7l9-11h-7z"
            ></path>
          </svg>
        </div>
        <div className="stat-title">Disponent Login Zeit</div>
        <div className="stat-value text-secondary">53h 12m</div>
        <div className="stat-desc">Mehr als 69% aller anderen User!</div>
      </div>

      <div className="stat">
        <div className="stat-figure text-info">
          <PlaneIcon className="w-8 h-8" />
        </div>
        <div className="stat-value text-info">Christoph Berlin</div>
        <div className="stat-title">Wurde von dir am meisten Disponiert</div>
        <div className="stat-desc text-secondary">
          43 Stationen warten auf deine Einsätze!
        </div>
      </div>
    </div>
  );
};