'use client'

import { motion } from 'framer-motion'
import { Sunrise, Sunset, MapPin, SlidersHorizontal } from 'lucide-react'

function SunCard({
  type,
  time,
  align,
}: {
  type: 'sunrise' | 'sunset'
  time: string
  align: 'left' | 'right'
}) {
  const Icon = type === 'sunrise' ? Sunrise : Sunset
  return (
    <motion.div
      initial={{ opacity: 0, y: -16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: 'easeOut' }}
      className="glass glass-hover flex items-center gap-3 rounded-2xl px-4 py-3"
    >
      <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent/10 ring-1 ring-accent/30">
        <Icon className="h-6 w-6 text-accent" style={{ filter: 'drop-shadow(0 0 6px rgba(255,215,0,0.6))' }} />
      </span>
      <div className={align === 'right' ? 'text-right' : ''}>
        <p className="font-display text-[0.6rem] tracking-cosmic text-muted-foreground">
          {type === 'sunrise' ? 'SUNRISE' : 'SUNSET'}
        </p>
        <p className="font-display text-xl font-bold leading-none text-white">
          {time}
        </p>
        <p className="mt-1 flex items-center gap-1 text-xs text-slate-400">
          <MapPin className="h-3 w-3 text-primary" /> Delhi, India
        </p>
      </div>
    </motion.div>
  )
}

export default function Header() {
  return (
    <header className="relative w-full">
      <div className="flex items-start justify-between gap-4">
        <SunCard type="sunrise" time="05:27 AM" align="left" />

        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7 }}
          className="flex flex-1 flex-col items-center pt-1 text-center"
        >
          <div className="flex items-center gap-3 text-primary/80">
            <span className="hidden text-xs sm:inline">◈──</span>
            <span className="font-display text-2xl text-glow-primary">ॐ</span>
            <span className="hidden text-xs sm:inline">──◈</span>
          </div>
          <h1 className="font-display text-3xl font-extrabold tracking-[0.18em] text-white text-glow-primary sm:text-5xl md:text-6xl">
            VEDIC CLOCK
          </h1>
          <p className="mt-1 font-display text-[0.65rem] tracking-cosmic text-muted-foreground sm:text-sm">
            ALIGN WITH COSMIC TIME
          </p>
        </motion.div>

        <div className="flex items-start gap-3">
          <SunCard type="sunset" time="06:48 PM" align="right" />
          <button
            aria-label="Settings"
            className="glass glass-hover hidden h-11 w-11 items-center justify-center rounded-xl text-primary lg:flex"
          >
            <SlidersHorizontal className="h-5 w-5" />
          </button>
        </div>
      </div>
    </header>
  )
}