"use client";

import {
  Alert,
  Box,
  Button,
} from "@mui/material";

type Props = {
  title: string;
  subtitle: string;
  resetLabel: string;
  createLabel: string;
  error: string;
  onReset: () => void;
  onCreatePage: () => void;
};

export default function TranslationManagementHeader({
  title,
  subtitle,
  resetLabel,
  createLabel,
  error,
  onReset,
  onCreatePage,
}: Props) {
  return (
    <>
      <Box
        sx={{
          display: "flex",
          flexDirection: {
            xs: "column",
            md: "row",
          },
          alignItems: {
            xs: "flex-start",
            md: "center",
          },
          justifyContent: "space-between",
          gap: 2,
          mb: 3,
        }}
      >
        <Box>
          <Box
            component="h1"
            sx={{
              m: 0,
              fontWeight: 800,
              fontSize: {
                xs: 28,
                md: 36,
              },
            }}
          >
            {title}
          </Box>

          <Box
            component="p"
            sx={{
              mt: 1,
              mb: 0,
              fontSize: 14,
              color: "text.secondary",
            }}
          >
            {subtitle}
          </Box>
        </Box>

        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1.5,
            flexWrap: "wrap",
          }}
        >
          <Button
            variant="outlined"
            onClick={onReset}
            sx={{
              minHeight: 46,
              px: 2.5,
              borderRadius: 2,
              fontWeight: 700,
              textTransform: "none",
            }}
          >
            ↻&nbsp;{resetLabel}
          </Button>

          <Button
            variant="contained"
            onClick={onCreatePage}
            sx={{
              minHeight: 46,
              px: 2.5,
              borderRadius: 2,
              fontWeight: 700,
              textTransform: "none",
            }}
          >
            <Box
              component="span"
              sx={{
                mr: 1,
                fontSize: 22,
                lineHeight: 1,
              }}
            >
              +
            </Box>
            {createLabel}
          </Button>
        </Box>
      </Box>

      {error ? (
        <Alert
          severity="error"
          sx={{ mb: 2 }}
        >
          {error}
        </Alert>
      ) : null}
    </>
  );
}