'use client';

import { useRouter } from 'next/navigation';
import { AppBar, Toolbar, IconButton, Typography, Box } from '@mui/material';
import { ArrowBack, Menu, AccountCircle } from '@mui/icons-material';

interface HeaderProps {
  title?: string;
  showBack?: boolean;
  showMenu?: boolean;
  showProfile?: boolean;
  onBackClick?: () => void;
  onMenuClick?: () => void;
  onProfileClick?: () => void;
}

export default function Header({
  title = '',
  showBack = true,
  showMenu = false,
  showProfile = true,
  onBackClick,
  onMenuClick,
  onProfileClick,
}: HeaderProps) {
  const router = useRouter();

  const handleBackClick = () => {
    if (onBackClick) {
      onBackClick();
    } else {
      router.back();
    }
  };

  const handleProfileClick = () => {
    if (onProfileClick) {
      onProfileClick();
    } else {
      router.push('/profile');
    }
  };

  return (
    <AppBar
      position="fixed"
      elevation={0}
      sx={{
        bgcolor: 'background.paper',
        borderBottom: '1px solid',
        borderColor: 'divider',
        zIndex: (theme) => theme.zIndex.drawer + 1,
      }}
    >
      <Toolbar
        sx={{
          minHeight: { xs: 56, sm: 64 },
          px: { xs: 2, sm: 3 },
        }}
      >
        {/* Left Section */}
        <Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
          {showMenu && (
            <IconButton
              edge="start"
              color="inherit"
              aria-label="메뉴"
              onClick={onMenuClick}
              sx={{ mr: 1, color: 'text.primary' }}
            >
              <Menu />
            </IconButton>
          )}
          {showBack && (
            <IconButton
              edge="start"
              color="inherit"
              aria-label="뒤로가기"
              onClick={handleBackClick}
              sx={{ mr: 1, color: 'text.primary' }}
            >
              <ArrowBack />
            </IconButton>
          )}
          {title && (
            <Typography
              variant="h6"
              sx={{
                fontWeight: 700,
                color: 'text.primary',
                fontSize: { xs: '1.1rem', sm: '1.25rem' },
              }}
            >
              {title}
            </Typography>
          )}
        </Box>

        {/* Right Section */}
        {showProfile && (
          <IconButton
            edge="end"
            color="inherit"
            aria-label="프로필"
            onClick={handleProfileClick}
            sx={{ color: 'text.primary' }}
          >
            <AccountCircle />
          </IconButton>
        )}
      </Toolbar>
    </AppBar>
  );
}
