import { Colors } from "@/constants/colors";
import { StyleSheet } from "react-native";

const shadow = {
  shadowColor: "#000",
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5,
};

export default StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: Colors.background,
    paddingHorizontal: 5,
  },
  header: {
    minHeight: 125,
    backgroundColor: Colors.header,
    alignItems: "center",
    justifyContent: "center",
    borderBottomWidth: 1,
    borderRadius: 25,
    marginBottom: 15,
    borderBottomColor: Colors.border,
    ...shadow,
  },
  title: {
    color: Colors.text,
    fontSize: 38,
    fontWeight: "bold",
    marginTop: "auto",
    marginBottom: 15,
  },
  liveBadgeContainer: {
    position: "absolute",
    top: 15,
    left: 20,
    backgroundColor: Colors.red,
    borderRadius: 10,
    paddingVertical: 5,
    paddingHorizontal: 10,
  },
  filterSection: {
    width: "100%",
    minHeight: 70,
    marginTop: 20,
  },
  searchContainer: {
    width: "100%",
    height: 60,
    marginHorizontal: "auto",
    backgroundColor: Colors.card,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    borderRadius: 20,
    paddingHorizontal: 20,
    marginTop: 15,
    borderWidth: 1.5,
    borderColor: Colors.border,
    ...shadow,
  },
  searchInput: {
    fontSize: 18,
    fontWeight: "500",
    color: "hsl(221, 39%, 80%)",
    width: "90%",
    height: "100%",
  },
  searchLabel: {
    color: "hsl(221, 39%, 80%)",
    fontSize: 18,
    fontWeight: "500",
  },
  suggestionsSection: {
    position: "absolute",
    zIndex: 10,
    top: 70,
    width: "100%",
    height: "auto",
    paddingBottom: 15,
    borderRadius: 20,
    backgroundColor: Colors.card,
    borderWidth: 1.5,
    borderColor: Colors.border,
    marginHorizontal: "auto",
    alignSelf: "center",
    marginTop: 15,
    ...shadow,
  },
  suggestionTitle: {
    color: Colors.textSecondary,
    fontSize: 14,
    marginLeft: 15,
    marginTop: 15,
    fontWeight: "500",
  },
  suggestionContainer: {
    marginTop: 15,
    width: "100%",
    height: 30,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    paddingHorizontal: 10,
  },
  imageContainer: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1.5,
    borderColor: Colors.text,
  },
  suggestionLabel: {
    color: Colors.text,
    fontSize: 12,
    fontWeight: "500",
    marginLeft: 10,
  },
  tag: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#333",
    borderRadius: 999,
    paddingHorizontal: 10,
    paddingVertical: 6,
    marginRight: 8,
    marginBottom: 8,
    marginTop: 5,
  },
  tagLabel: {
    color: Colors.text,
    marginRight: 5,
  },
  tagContainer: {
    width: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: 10,
  },
  personRow: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#1b1e2b",
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 10,
    marginBottom: 8,
  },
  avatarCircle: {
    width: 40,
    height: 40,
    borderRadius: 999,
    backgroundColor: "#2a2f45",
    alignItems: "center",
    justifyContent: "center",
    marginRight: 10,
  },
  personName: { color: Colors.text, fontSize: 16, fontWeight: "600" },
  personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
  sectionContainer: {
    width: "100%",
    paddingHorizontal: 10,
    marginBottom: 12,
  },
  sectionTitle: {
    color: Colors.text,
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 6,
  },
  centerText: {
    color: Colors.text,
    fontSize: 16,
    textAlign: "center",
    marginTop: 14,
  },
});