import { Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';

interface FooterProps {
  className?: string;
}

export function Footer({ className }: FooterProps) {
  return (
    <footer
      className={cn(
        'shrink-0 px-2 py-10 pb-[calc(env(safe-area-inset-bottom)+2.5rem)] md:px-3',
        className
      )}
    >
      <div className="flex w-full items-center justify-center">
        <div className="inline-flex select-none items-center gap-2 rounded-full border border-border/60 bg-card/55 px-3 py-2 text-[11px] font-medium tracking-[0.12em] text-muted-foreground shadow-[0_1px_3px_rgba(0,0,0,0.05)] backdrop-blur-2xl dark:border-white/8 dark:bg-white/4 dark:shadow-[0_1px_3px_rgba(0,0,0,0.14)]">
          <span className="flex size-5 items-center justify-center rounded-full bg-amber-400/15 text-amber-500 ring-1 ring-amber-400/20 dark:bg-amber-300/12 dark:text-amber-200 dark:ring-amber-200/15">
            <Sparkles className="size-3" aria-hidden />
          </span>
          <span className="truncate">
            MioKit by{' '}
            <a
              href="https://github.com/auroraphtgrp01"
              target="_blank"
              rel="noopener noreferrer"
              className="text-foreground/80 hover:text-primary transition-colors cursor-pointer"
            >
              auroraphtgrp01
            </a>
          </span>
          <span className="text-border/90">|</span>
          <span className="truncate">Fork from Agent Kit</span>
        </div>
      </div>
    </footer>
  );
}