import type { Metadata } from 'next';
import Link from 'next/link';
import { PawPrint, Home } from 'lucide-react';

export const metadata: Metadata = {
  title: 'Painel do Canil | PetLink',
  description: 'Área de gestão do canil na plataforma PetLink.',
};

export default function ShelterLayout({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ minHeight: '100dvh', display: 'flex', flexDirection: 'column', background: 'var(--cream)' }}>
      {/* Header do painel */}
      <header
        style={{
          height:          '60px',
          display:         'flex',
          alignItems:      'center',
          justifyContent:  'space-between',
          padding:         '0 var(--space-5)',
          background:      'var(--linen)',
          borderBottom:    '1px solid var(--parchment)',
          position:        'sticky',
          top:             0,
          zIndex:          50,
        }}
      >
        <Link href="/shelter/dashboard" style={{ display: 'flex', alignItems: 'center', gap: '8px', textDecoration: 'none' }}>
          <PawPrint size={20} style={{ color: 'var(--terra)' }} />
          <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 700, fontSize: '17px', color: 'var(--terra)' }}>
            PetLink Canil
          </span>
        </Link>
        <Link
          href="/"
          style={{ display: 'flex', alignItems: 'center', gap: '6px', fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--soil-mid)', textDecoration: 'none' }}
        >
          <Home size={14} />
          Site público
        </Link>
      </header>

      <main style={{ flex: 1 }}>{children}</main>
    </div>
  );
}